changes splash experience #2721

Merged
jessopb merged 3 commits from splashchange into master 2019-08-09 19:13:31 +02:00
5 changed files with 73 additions and 22 deletions

View file

@ -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(

View file

@ -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<Props, State> {
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<Props, State> {
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<Props, State> {
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<Props, State> {
}
render() {
const { error } = this.state;
const { error, details } = this.state;
const { animationHidden, setClientSetting } = this.props;
return (
<div className="splash">
<css-doodle>
{`
<h1 className="splash__title">LBRY</h1>
<div className="splash__details">{details}</div>
{!animationHidden && (
<css-doodle class="doodle">
{`
--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<Props, State> {
}
)
`}
</css-doodle>
<h1 className="splash__title">LBRY</h1>
</css-doodle>
)}
<Button
className="splash__animation-toggle"
label={!animationHidden ? __('I feel woosy! Stop spinning!') : __('Spin Spin Sugar')}
onClick={() => setClientSetting(SETTINGS.HIDE_SPLASH_ANIMATION, !animationHidden)}
/>
{error && (
<div className="splash__error card card--section">
<h3>{__('Uh oh. The flux in our Retro Encabulator must be out of whack. Try refreshing to fix it.')}</h3>
<p className="card__subtitle">
{__('Uh oh. The flux in our Retro Encabulator must be out of whack. Try refreshing to fix it.')}
</p>
<div className="card__actions--top-space card__actions--center">
<Button button="primary" label={__('Refresh')} onClick={() => window.location.reload()} />
</div>

View file

@ -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';

View file

@ -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

View file

@ -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;
}