Merge pull request #2721 from lbryio/splashchange

changes splash experience

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(

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

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

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

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