From bcbffa932b956981762043e38e6fcdaa0f179f16 Mon Sep 17 00:00:00 2001 From: jessop Date: Thu, 8 Aug 2019 16:30:03 -0400 Subject: [PATCH] changes splash experience - disable spin button - startup status changes from tzarebczan --- src/ui/component/button/view.jsx | 1 + src/ui/component/splash/index.js | 6 ++++ src/ui/component/splash/view.jsx | 56 ++++++++++++++++++++++-------- src/ui/constants/settings.js | 1 + src/ui/redux/reducers/settings.js | 1 + src/ui/scss/component/_button.scss | 20 ++++++++++- src/ui/scss/component/_splash.scss | 21 +++++++++-- 7 files changed, 87 insertions(+), 19 deletions(-) diff --git a/src/ui/component/button/view.jsx b/src/ui/component/button/view.jsx index f34e0cf7e..82bfebdc7 100644 --- a/src/ui/component/button/view.jsx +++ b/src/ui/component/button/view.jsx @@ -70,6 +70,7 @@ const Button = forwardRef((props: Props, ref: any) => { 'button--disabled': disabled, 'button--link': button === 'link', 'button--constrict': constrict, + 'button--splash': button === 'splash', } : 'button--no-style', className diff --git a/src/ui/component/splash/index.js b/src/ui/component/splash/index.js index 1fbc7d64b..29b7701f6 100644 --- a/src/ui/component/splash/index.js +++ b/src/ui/component/splash/index.js @@ -1,17 +1,23 @@ import { connect } from 'react-redux'; import { selectDaemonVersionMatched, selectModal } from 'redux/selectors/app'; import { doCheckDaemonVersion, doNotifyUnlockWallet, doHideModal } from 'redux/actions/app'; +import { doSetClientSetting } from 'redux/actions/settings'; +import * as settings from 'constants/settings'; import SplashScreen from './view'; +import { makeSelectClientSetting } from 'redux/selectors/settings'; + const select = state => ({ modal: selectModal(state), daemonVersionMatched: selectDaemonVersionMatched(state), + animationHidden: makeSelectClientSetting(settings.HIDE_SPLASH_ANIMATION)(state), }); const perform = dispatch => ({ checkDaemonVersion: () => dispatch(doCheckDaemonVersion()), notifyUnlockWallet: () => dispatch(doNotifyUnlockWallet()), hideModal: () => dispatch(doHideModal()), + setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)), }); export default connect( diff --git a/src/ui/component/splash/view.jsx b/src/ui/component/splash/view.jsx index 4285304e3..1e4235bbb 100644 --- a/src/ui/component/splash/view.jsx +++ b/src/ui/component/splash/view.jsx @@ -1,5 +1,6 @@ // @flow import * as MODALS from 'constants/modal_types'; +import * as SETTINGS from 'constants/settings'; import React from 'react'; import { Lbry } from 'lbry-redux'; import Button from 'component/button'; @@ -10,6 +11,7 @@ import ModalDownloading from 'modal/modalDownloading'; import 'css-doodle'; const FORTY_FIVE_SECONDS = 45 * 1000; +type SetDaemonSettingArg = boolean | string | number; type Props = { checkDaemonVersion: () => Promise, @@ -21,6 +23,8 @@ type Props = { modal: ?{ id: string, }, + animationHidden: boolean, + setClientSetting: (string, SetDaemonSettingArg) => void, }; type State = { @@ -37,7 +41,7 @@ export default class SplashScreen extends React.PureComponent { super(props); this.state = { - details: __('Starting up'), + details: __('Starting...'), message: __('Connecting'), launchedModal: false, error: false, @@ -112,10 +116,10 @@ export default class SplashScreen extends React.PureComponent { this.hasRecordedUser = true; } - const { wallet, blockchain_headers: blockchainHeaders } = status; + const { wallet, startup_status: startupStatus, blockchain_headers: blockchainHeaders } = status; // If the wallet is locked, stop doing anything and make the user input their password - if (wallet && wallet.is_locked) { + if (status.is_running && wallet && wallet.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); @@ -141,20 +145,31 @@ export default class SplashScreen extends React.PureComponent { if (blockChainHeaders.download_progress < 100) { this.setState({ message: __('Blockchain Sync'), - details: `${__('Catching up with the blockchain')} (${blockchainHeaders.download_progress}%)`, + details: `${__('Catching up...')} (${blockchainHeaders.download_progress}%)`, }); + if (this.timeout) { + clearTimeout(this.timeout); + } } } else if (wallet && wallet.blocks_behind > 0) { const format = wallet.blocks_behind === 1 ? '%s block behind' : '%s blocks behind'; this.setState({ message: __('Blockchain Sync'), - details: __(format, wallet.blocks_behind), - }); - } else if (wallet && wallet.blocks_behind === 0) { - this.setState({ - message: 'Network Loading', - details: 'Initializing LBRY service...', + details: `${__('Catching up...')} (${__(format, wallet.blocks_behind)})`, }); + if (this.timeout) { + clearTimeout(this.timeout); + } + } else if (wallet && wallet.blocks_behind === 0 && !status.is_running && startupStatus.database) { + // Usually the transaction sync state, there's no status for this yet + // Only show after user has been waiting 10 seconds + // https://github.com/lbryio/lbry-sdk/issues/2314 + setTimeout(() => { + this.setState({ + message: 'Initializing', + details: 'Almost done...', + }); + }, 10000); } setTimeout(() => { @@ -208,12 +223,17 @@ export default class SplashScreen extends React.PureComponent { } render() { - const { error } = this.state; + const { error, details } = this.state; + const { animationHidden, setClientSetting } = this.props; return (
- - {` +

LBRY

+
{details}
+ + {!animationHidden && ( + + {` --color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5)); :doodle { @grid: 30x1 / 18vmin; @@ -246,8 +266,14 @@ export default class SplashScreen extends React.PureComponent { } ) `} - -

LBRY

+ + )} +