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..b8bfc4c67 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'; @@ -21,6 +22,8 @@ type Props = { modal: ?{ id: string, }, + animationHidden: boolean, + setClientSetting: (string, boolean) => void, }; type State = { @@ -37,7 +40,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 +115,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,19 +144,25 @@ 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}%)`, }); } } 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), + details: `${__('Catching up...')} (${__(format, wallet.blocks_behind)})`, }); - } else if (wallet && wallet.blocks_behind === 0) { + } else if ( + wallet && + wallet.blocks_behind === 0 && + !wallet.is_locked && + !status.is_running && + startupStatus.database + ) { this.setState({ - message: 'Network Loading', - details: 'Initializing LBRY service...', + message: 'Finalizing', + details: 'Almost ready...', }); } @@ -208,12 +217,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,11 +260,18 @@ export default class SplashScreen extends React.PureComponent { } ) `} - -

LBRY

+
+ )} +
diff --git a/src/ui/constants/settings.js b/src/ui/constants/settings.js index 3c30ce3ca..f6472bb78 100644 --- a/src/ui/constants/settings.js +++ b/src/ui/constants/settings.js @@ -18,3 +18,4 @@ export const OS_NOTIFICATIONS_ENABLED = 'osNotificationsEnabled'; export const AUTO_DOWNLOAD = 'autoDownload'; export const SUPPORT_OPTION = 'supportOption'; export const HIDE_BALANCE = 'hideBalance'; +export const HIDE_SPLASH_ANIMATION = 'hideSplashAnimation'; diff --git a/src/ui/redux/reducers/settings.js b/src/ui/redux/reducers/settings.js index c5370d92b..45c694752 100644 --- a/src/ui/redux/reducers/settings.js +++ b/src/ui/redux/reducers/settings.js @@ -30,6 +30,7 @@ const defaultState = { [SETTINGS.AUTO_DOWNLOAD]: getLocalStorageSetting(SETTINGS.AUTO_DOWNLOAD, true), [SETTINGS.OS_NOTIFICATIONS_ENABLED]: Boolean(getLocalStorageSetting(SETTINGS.OS_NOTIFICATIONS_ENABLED, true)), [SETTINGS.HIDE_BALANCE]: Boolean(getLocalStorageSetting(SETTINGS.HIDE_BALANCE, false)), + [SETTINGS.HIDE_SPLASH_ANIMATION]: Boolean(getLocalStorageSetting(SETTINGS.HIDE_SPLASH_ANIMATION, false)), }, isNight: false, languages: { en: 'English', pl: 'Polish', id: 'Bahasa Indonesia' }, // temporarily hard code these so we can advance i18n testing diff --git a/src/ui/scss/component/_splash.scss b/src/ui/scss/component/_splash.scss index ccbed1843..2313b7103 100644 --- a/src/ui/scss/component/_splash.scss +++ b/src/ui/scss/component/_splash.scss @@ -5,15 +5,11 @@ align-items: center; background-color: var(--color-background); display: flex; + flex-direction: column; justify-content: center; overflow: hidden; } -// .splash__actions { -// margin-top: var(--spacing-medium); -// align-items: center; -// } - .splash__button { border-bottom: 1px solid $lbry-white; color: $lbry-white; @@ -26,9 +22,11 @@ } .splash__details { - font-weight: 600; + position: absolute; line-height: 1; - max-width: 400px; + font-weight: 300; + color: $lbry-white; + margin-top: 2rem; } .splash__title { @@ -37,10 +35,34 @@ line-height: 1; font-weight: 700; color: $lbry-white; + margin-top: -1rem; +} + +.splash__animation-toggle { + position: fixed; + bottom: var(--spacing-large); + right: var(--spacing-large); + padding: var(--spacing-medium); + border-color: $lbry-white; + color: $lbry-white; + background-color: rgba($lbry-white, 0.2); + font-size: var(--font-label); + + &:hover { + color: $lbry-white; + background-color: rgba($lbry-white, 0.5); + .icon { + stroke: $lbry-white; + } + } } .splash__error { position: absolute; - margin-top: 25rem; + margin-top: 20rem; box-shadow: var(--card-box-shadow) $lbry-gray-5; } + +.doodle { + position: fixed; +}