lbry-desktop/ui/component/splash/view.jsx

294 lines
9.1 KiB
React
Raw Normal View History

2018-08-13 18:23:01 +02:00
// @flow
import * as MODALS from 'constants/modal_types';
import * as SETTINGS from 'constants/settings';
2019-05-29 21:48:44 +02:00
import React from 'react';
import { Lbry } from 'lbry-redux';
2019-05-29 21:48:44 +02:00
import Button from 'component/button';
2018-07-18 21:48:30 +02:00
import ModalWalletUnlock from 'modal/modalWalletUnlock';
import ModalIncompatibleDaemon from 'modal/modalIncompatibleDaemon';
import ModalUpgrade from 'modal/modalUpgrade';
import ModalDownloading from 'modal/modalDownloading';
2019-05-29 21:48:44 +02:00
import 'css-doodle';
2016-11-22 21:19:08 +01:00
2019-05-29 21:48:44 +02:00
const FORTY_FIVE_SECONDS = 45 * 1000;
2018-11-08 20:48:38 +01:00
2018-03-26 23:32:43 +02:00
type Props = {
checkDaemonVersion: () => Promise<any>,
2019-10-22 02:12:43 +02:00
notifyUnlockWallet: (?boolean) => Promise<any>,
2018-08-13 18:23:01 +02:00
daemonVersionMatched: boolean,
onReadyToLaunch: () => void,
2018-08-16 07:17:15 +02:00
authenticate: () => void,
hideModal: () => void,
modal: ?{
2018-04-23 20:02:06 +02:00
id: string,
},
animationHidden: boolean,
2019-08-09 19:12:28 +02:00
setClientSetting: (string, boolean) => void,
2018-03-26 23:32:43 +02:00
};
2017-05-17 10:10:25 +02:00
2018-03-26 23:32:43 +02:00
type State = {
details: string,
message: string,
2018-07-18 21:48:30 +02:00
launchedModal: boolean,
2018-11-08 20:48:38 +01:00
error: boolean,
isRunning: boolean,
launchWithIncompatibleDaemon: boolean,
2018-03-26 23:32:43 +02:00
};
export default class SplashScreen extends React.PureComponent<Props, State> {
2018-03-26 23:32:43 +02:00
constructor(props: Props) {
2017-05-17 10:10:25 +02:00
super(props);
this.state = {
details: __('Starting...'),
message: __('Connecting'),
2018-07-18 21:48:30 +02:00
launchedModal: false,
2019-03-08 20:20:17 +01:00
error: false,
launchWithIncompatibleDaemon: false,
isRunning: false,
2017-05-17 10:10:25 +02:00
};
2018-08-20 18:33:36 +02:00
2018-11-12 19:22:51 +01:00
(this: any).renderModals = this.renderModals.bind(this);
(this: any).runWithIncompatibleDaemon = this.runWithIncompatibleDaemon.bind(this);
2018-08-20 18:33:36 +02:00
this.hasRecordedUser = false;
2018-11-08 20:48:38 +01:00
this.timeout = undefined;
2017-05-17 10:10:25 +02:00
}
2018-08-13 18:23:01 +02:00
componentDidMount() {
const { checkDaemonVersion } = this.props;
2018-11-08 20:48:38 +01:00
this.adjustErrorTimeout();
2019-07-22 06:31:25 +02:00
2018-08-13 18:23:01 +02:00
Lbry.connect()
.then(checkDaemonVersion)
2018-08-13 18:23:01 +02:00
.then(() => {
this.updateStatus();
})
.catch(() => {
this.setState({
message: __('Connection Failure'),
details: __(
2019-03-20 22:43:00 +01:00
'Try closing all LBRY processes and starting again. If this still happens, your anti-virus software or firewall may be preventing LBRY from connecting. Contact hello@lbry.com if you think this is a software bug.'
2018-08-13 18:23:01 +02:00
),
});
});
}
2018-11-08 20:48:38 +01:00
componentDidUpdate() {
this.adjustErrorTimeout();
}
componentWillUnmount() {
if (this.timeout) {
clearTimeout(this.timeout);
}
}
adjustErrorTimeout() {
if (this.timeout) {
clearTimeout(this.timeout);
}
// Every time we make it to a new step in the daemon startup process, reset the timer
// If nothing changes after 1 minute, show the error message.
this.timeout = setTimeout(() => {
this.setState({ error: true });
2019-05-29 21:48:44 +02:00
}, FORTY_FIVE_SECONDS);
2018-11-08 20:48:38 +01:00
}
2017-05-17 10:10:25 +02:00
updateStatus() {
const { modal, notifyUnlockWallet } = this.props;
const { launchedModal } = this.state;
Lbry.status().then(status => {
if (status.is_running) {
Lbry.wallet_status().then(walletStatus => {
if (walletStatus.is_locked) {
// Clear the error timeout, it might sit on this step for a while until someone enters their password
if (this.timeout) {
clearTimeout(this.timeout);
}
// Make sure there isn't another active modal (like INCOMPATIBLE_DAEMON)
2019-10-17 20:54:33 +02:00
this.updateStatusCallback(status, true);
if (launchedModal === false && !modal) {
this.setState({ launchedModal: true }, () => notifyUnlockWallet());
}
} else {
this.updateStatusCallback(status);
}
});
} else {
this.updateStatusCallback(status);
}
});
2017-05-17 10:10:25 +02:00
}
updateStatusCallback(status: StatusResponse, waitingForUnlock: boolean = false) {
const { authenticate } = this.props;
2018-08-16 07:17:15 +02:00
2019-04-24 16:02:08 +02:00
if (status.connection_status.code !== 'connected') {
2019-03-05 05:46:57 +01:00
this.setState({ error: true });
2018-11-08 20:48:38 +01:00
return;
}
2018-08-20 18:33:36 +02:00
if (!this.hasRecordedUser && status) {
2018-08-16 07:17:15 +02:00
authenticate();
2018-08-20 18:33:36 +02:00
this.hasRecordedUser = true;
2018-08-16 07:17:15 +02:00
}
const { wallet, startup_status: startupStatus, blockchain_headers: blockchainHeaders } = status;
2018-11-08 20:48:38 +01:00
// If the wallet is locked, stop doing anything and make the user input their password
if (status.is_running && !waitingForUnlock) {
Lbry.resolve({ urls: 'lbry://one' }).then(() => {
this.setState({ isRunning: true }, () => this.continueAppLaunch());
});
return;
2019-10-17 19:49:00 +02:00
} else if (blockchainHeaders) {
const blockChainHeaders = blockchainHeaders;
if (blockChainHeaders.download_progress < 100) {
2018-11-08 20:48:38 +01:00
this.setState({
message: __('Blockchain Sync'),
2019-10-17 19:49:00 +02:00
details: `${__('Catching up...')} (${blockchainHeaders.download_progress}%)`,
2018-11-08 20:48:38 +01:00
});
}
2019-10-17 19:49:00 +02:00
} else if (wallet && wallet.blocks_behind > 0) {
const amountBehind = wallet.blocks_behind === 1 ? '%amountBehind% block behind' : '%amountBehind% blocks behind';
this.setState({
message: __('Blockchain Sync'),
details: `${__('Catching up...')} (${__(amountBehind, { amountBehind: wallet.blocks_behind })})`,
});
} else if (wallet && wallet.blocks_behind === 0 && !status.is_running && startupStatus.database) {
this.setState({
message: 'Finalizing',
details: 'Almost ready...',
});
}
2019-10-17 19:49:00 +02:00
setTimeout(() => {
this.updateStatus();
}, 500);
2017-05-17 10:10:25 +02:00
}
runWithIncompatibleDaemon() {
const { hideModal } = this.props;
hideModal();
this.setState({ launchWithIncompatibleDaemon: true }, () => this.continueAppLaunch());
}
continueAppLaunch() {
const { daemonVersionMatched, onReadyToLaunch } = this.props;
const { isRunning, launchWithIncompatibleDaemon } = this.state;
2019-05-29 21:48:44 +02:00
if (daemonVersionMatched) {
onReadyToLaunch();
} else if (launchWithIncompatibleDaemon && isRunning) {
// The user may have decided to run the app with mismatched daemons
// They could make this decision before the daemon is finished starting up
// If it isn't running, this function will be called after the daemon is started
onReadyToLaunch();
}
}
2018-08-20 18:33:36 +02:00
hasRecordedUser: boolean;
2018-11-08 20:48:38 +01:00
timeout: ?TimeoutID;
2018-08-20 18:33:36 +02:00
2018-11-12 19:22:51 +01:00
renderModals() {
const { modal } = this.props;
const modalId = modal && modal.id;
2018-04-23 20:02:06 +02:00
2018-11-12 19:22:51 +01:00
if (!modalId) {
return null;
}
switch (modalId) {
case MODALS.INCOMPATIBLE_DAEMON:
return <ModalIncompatibleDaemon onContinueAnyway={this.runWithIncompatibleDaemon} />;
2018-11-12 19:22:51 +01:00
case MODALS.WALLET_UNLOCK:
return <ModalWalletUnlock />;
case MODALS.UPGRADE:
return <ModalUpgrade />;
case MODALS.DOWNLOADING:
return <ModalDownloading />;
default:
return null;
}
}
render() {
const { error, details } = this.state;
const { animationHidden, setClientSetting } = this.props;
2018-11-12 19:22:51 +01:00
2017-06-06 23:19:12 +02:00
return (
2019-05-29 21:48:44 +02:00
<div className="splash">
<h1 className="splash__title">LBRY</h1>
<div className="splash__details">{details}</div>
{!animationHidden && (
<css-doodle class="doodle">
{`
2019-06-05 06:14:15 +02:00
--color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5));
:doodle {
@grid: 30x1 / 18vmin;
--deg: @p(-180deg, 180deg);
}
:container {
perspective: 30vmin;
}
2019-06-05 06:14:15 +02:00
@place-cell: center;
@size: 100%;
box-shadow: @m2(0 0 50px var(--color));
2019-06-05 06:14:15 +02:00
will-change: transform, opacity;
animation: scale-up 12s linear infinite;
animation-delay: calc(-12s / @size() * @i());
@keyframes scale-up {
0%, 95.01%, 100% {
transform: translateZ(0) rotate(0);
opacity: 0;
}
10% {
opacity: 1;
2019-06-05 06:14:15 +02:00
}
95% {
transform:
2019-06-05 06:14:15 +02:00
translateZ(35vmin) rotateZ(@var(--deg));
}
}
)
`}
</css-doodle>
)}
<Button
2019-08-09 19:12:28 +02:00
className="splash__animation-toggle"
label={!animationHidden ? __('I feel woosy! Stop spinning!') : __('Spin Spin Sugar')}
onClick={() => setClientSetting(SETTINGS.HIDE_SPLASH_ANIMATION, !animationHidden)}
/>
2019-05-29 21:48:44 +02:00
{error && (
<div className="splash__error card card--section">
2019-08-09 19:12:28 +02:00
<p className="card__subtitle">
{__('Uh oh. The flux in our Retro Encabulator must be out of whack. Try refreshing to fix it.')}
</p>
2019-09-27 22:03:05 +02:00
<div className="card__actions--center">
2019-05-29 21:48:44 +02:00
<Button button="primary" label={__('Refresh')} onClick={() => window.location.reload()} />
</div>
<div className="help">
<p>{__('If you still have issues, your anti-virus software or firewall may be preventing startup.')}</p>
<p>
{__('Reach out to hello@lbry.com for help, or check out')}{' '}
<Button button="link" href="https://lbry.com/faq/startup-troubleshooting" label="this link" />.
</p>
</div>
</div>
)}
{/* Temp hack: don't show any modals on splash screen daemon is running;
daemon doesn't let you quit during startup, so the "Quit" buttons
2019-05-29 21:48:44 +02:00
in the modals won't work. */}
{this.renderModals()}
2019-05-29 21:48:44 +02:00
</div>
2017-06-06 23:19:12 +02:00
);
2016-04-10 02:00:56 +02:00
}
2017-05-17 10:10:25 +02:00
}