From bcbffa932b956981762043e38e6fcdaa0f179f16 Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Thu, 8 Aug 2019 16:30:03 -0400
Subject: [PATCH 1/3] 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<any, {}>((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<any>,
@@ -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<Props, State> {
     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<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,20 +145,31 @@ 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}%)`,
         });
+        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<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,8 +266,14 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
             }
           )
           `}
-        </css-doodle>
-        <h1 className="splash__title">LBRY</h1>
+          </css-doodle>
+        )}
+        <Button
+          className="splash__controls"
+          button="splash"
+          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>
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/_button.scss b/src/ui/scss/component/_button.scss
index c250a70bf..406b80cb3 100644
--- a/src/ui/scss/component/_button.scss
+++ b/src/ui/scss/component/_button.scss
@@ -31,11 +31,14 @@
 }
 
 .button--primary,
-.button--inverse {
+.button--inverse,
+.button--splash {
   height: var(--button-height);
   border-radius: var(--button-radius);
   padding-top: 0;
   padding-bottom: 0;
+  padding-right: 1em;
+  padding-left: 1em;
   box-sizing: border-box;
 }
 
@@ -52,6 +55,21 @@
   }
 }
 
+.button--splash {
+  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;
+    }
+  }
+}
+
 .button--alt {
   padding: 0;
 }
diff --git a/src/ui/scss/component/_splash.scss b/src/ui/scss/component/_splash.scss
index ccbed1843..331430a70 100644
--- a/src/ui/scss/component/_splash.scss
+++ b/src/ui/scss/component/_splash.scss
@@ -5,6 +5,7 @@
   align-items: center;
   background-color: var(--color-background);
   display: flex;
+  flex-direction: column;
   justify-content: center;
   overflow: hidden;
 }
@@ -26,9 +27,12 @@
 }
 
 .splash__details {
-  font-weight: 600;
+  position: absolute;
+  font-size: 12px;
   line-height: 1;
-  max-width: 400px;
+  font-weight: 300;
+  color: $lbry-white;
+  margin-top: 2rem;
 }
 
 .splash__title {
@@ -37,10 +41,21 @@
   line-height: 1;
   font-weight: 700;
   color: $lbry-white;
+  margin-top: -1rem;
+}
+
+.splash__controls {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
 }
 
 .splash__error {
   position: absolute;
-  margin-top: 25rem;
+  margin-top: 20rem;
   box-shadow: var(--card-box-shadow) $lbry-gray-5;
 }
+
+.doodle {
+  position: fixed;
+}
-- 
2.45.2


From 5e72ef920f8037fe6195ba3b59f6ba1942007a97 Mon Sep 17 00:00:00 2001
From: Thomas Zarebczan <thomas.zarebczan@gmail.com>
Date: Fri, 9 Aug 2019 12:14:43 -0400
Subject: [PATCH 2/3] fix: don't show short statuses

Don't show blocks behind if it can catch up quickly. 1 less status.
---
 src/ui/component/splash/view.jsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/ui/component/splash/view.jsx b/src/ui/component/splash/view.jsx
index 1e4235bbb..03d315871 100644
--- a/src/ui/component/splash/view.jsx
+++ b/src/ui/component/splash/view.jsx
@@ -153,20 +153,29 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
       }
     } 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: `${__('Catching up...')} (${__(format, wallet.blocks_behind)})`,
-      });
+      // Only show blocks behind if it takes more than a few seconds.
+      setTimeout(() => {
+        this.setState({
+          message: __('Blockchain Sync'),
+          details: `${__('Catching up...')} (${__(format, wallet.blocks_behind)})`,
+        });
+      }, 5000);
       if (this.timeout) {
         clearTimeout(this.timeout);
       }
-    } else if (wallet && wallet.blocks_behind === 0 && !status.is_running && startupStatus.database) {
+    } else if (
+      wallet &&
+      wallet.blocks_behind === 0 &&
+      !wallet.is_locked &&
+      !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',
+          message: 'Finalizing',
           details: 'Almost done...',
         });
       }, 10000);
-- 
2.45.2


From 96ca28019fecf8bbb96e3b2895366c4b278ac952 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 9 Aug 2019 13:12:28 -0400
Subject: [PATCH 3/3] cleanup

---
 src/ui/component/button/view.jsx   |  1 -
 src/ui/component/splash/view.jsx   | 42 ++++++++++--------------------
 src/ui/scss/component/_button.scss | 20 +-------------
 src/ui/scss/component/_splash.scss | 25 +++++++++++-------
 4 files changed, 31 insertions(+), 57 deletions(-)

diff --git a/src/ui/component/button/view.jsx b/src/ui/component/button/view.jsx
index 82bfebdc7..f34e0cf7e 100644
--- a/src/ui/component/button/view.jsx
+++ b/src/ui/component/button/view.jsx
@@ -70,7 +70,6 @@ const Button = forwardRef<any, {}>((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/view.jsx b/src/ui/component/splash/view.jsx
index 03d315871..b8bfc4c67 100644
--- a/src/ui/component/splash/view.jsx
+++ b/src/ui/component/splash/view.jsx
@@ -11,7 +11,6 @@ import ModalDownloading from 'modal/modalDownloading';
 import 'css-doodle';
 
 const FORTY_FIVE_SECONDS = 45 * 1000;
-type SetDaemonSettingArg = boolean | string | number;
 
 type Props = {
   checkDaemonVersion: () => Promise<any>,
@@ -24,7 +23,7 @@ type Props = {
     id: string,
   },
   animationHidden: boolean,
-  setClientSetting: (string, SetDaemonSettingArg) => void,
+  setClientSetting: (string, boolean) => void,
 };
 
 type State = {
@@ -147,22 +146,13 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
           message: __('Blockchain Sync'),
           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';
-      // Only show blocks behind if it takes more than a few seconds.
-      setTimeout(() => {
-        this.setState({
-          message: __('Blockchain Sync'),
-          details: `${__('Catching up...')} (${__(format, wallet.blocks_behind)})`,
-        });
-      }, 5000);
-      if (this.timeout) {
-        clearTimeout(this.timeout);
-      }
+      this.setState({
+        message: __('Blockchain Sync'),
+        details: `${__('Catching up...')} (${__(format, wallet.blocks_behind)})`,
+      });
     } else if (
       wallet &&
       wallet.blocks_behind === 0 &&
@@ -170,15 +160,10 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
       !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: 'Finalizing',
-          details: 'Almost done...',
-        });
-      }, 10000);
+      this.setState({
+        message: 'Finalizing',
+        details: 'Almost ready...',
+      });
     }
 
     setTimeout(() => {
@@ -278,14 +263,15 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
           </css-doodle>
         )}
         <Button
-          className="splash__controls"
-          button="splash"
-          label={!animationHidden ? __('I feel woosy! Stop spinning!') : 'Spin Spin Sugar'}
+          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>
diff --git a/src/ui/scss/component/_button.scss b/src/ui/scss/component/_button.scss
index 406b80cb3..c250a70bf 100644
--- a/src/ui/scss/component/_button.scss
+++ b/src/ui/scss/component/_button.scss
@@ -31,14 +31,11 @@
 }
 
 .button--primary,
-.button--inverse,
-.button--splash {
+.button--inverse {
   height: var(--button-height);
   border-radius: var(--button-radius);
   padding-top: 0;
   padding-bottom: 0;
-  padding-right: 1em;
-  padding-left: 1em;
   box-sizing: border-box;
 }
 
@@ -55,21 +52,6 @@
   }
 }
 
-.button--splash {
-  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;
-    }
-  }
-}
-
 .button--alt {
   padding: 0;
 }
diff --git a/src/ui/scss/component/_splash.scss b/src/ui/scss/component/_splash.scss
index 331430a70..2313b7103 100644
--- a/src/ui/scss/component/_splash.scss
+++ b/src/ui/scss/component/_splash.scss
@@ -10,11 +10,6 @@
   overflow: hidden;
 }
 
-// .splash__actions {
-//   margin-top: var(--spacing-medium);
-//   align-items: center;
-// }
-
 .splash__button {
   border-bottom: 1px solid $lbry-white;
   color: $lbry-white;
@@ -28,7 +23,6 @@
 
 .splash__details {
   position: absolute;
-  font-size: 12px;
   line-height: 1;
   font-weight: 300;
   color: $lbry-white;
@@ -44,10 +38,23 @@
   margin-top: -1rem;
 }
 
-.splash__controls {
+.splash__animation-toggle {
   position: fixed;
-  bottom: 30px;
-  right: 30px;
+  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 {
-- 
2.45.2