Less intrusive first run experience

package.json

@@ -67,6 +67,7 @@
     "react-feather": "^1.0.8",
     "react-modal": "^3.1.7",
     "react-paginate": "^5.2.1",
+    "react-pose": "^4.0.5",
     "react-redux": "^5.0.3",
     "react-simplemde-editor": "^3.6.16",
     "react-toggle": "^4.0.2",

src/renderer/component/app/index.js

@@ -7,8 +7,10 @@ import {
   doError,
 } from 'lbry-redux';
 import { doRecordScroll } from 'redux/actions/navigation';
+import { doToggleEnhancedLayout } from 'redux/actions/app';
 import { selectUser } from 'lbryinc';
 import { selectThemePath } from 'redux/selectors/settings';
+import { selectEnhancedLayout } from 'redux/selectors/app';
 import App from './view';
 
 const select = state => ({
@@ -17,12 +19,14 @@ const select = state => ({
   currentStackIndex: selectHistoryIndex(state),
   currentPageAttributes: selectActiveHistoryEntry(state),
   theme: selectThemePath(state),
+  enhancedLayout: selectEnhancedLayout(state),
 });
 
 const perform = dispatch => ({
   alertError: errorList => dispatch(doError(errorList)),
   recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)),
   updateBlockHeight: () => dispatch(doUpdateBlockHeight()),
+  toggleEnhancedLayout: () => dispatch(doToggleEnhancedLayout()),
 });
 
 export default connect(

src/renderer/component/app/view.jsx

@@ -6,7 +6,9 @@ import ReactModal from 'react-modal';
 import throttle from 'util/throttle';
 import SideBar from 'component/sideBar';
 import Header from 'component/header';
-import { openContextMenu } from '../../util/context-menu';
+import { openContextMenu } from 'util/context-menu';
+import EnhancedLayoutListener from 'util/enhanced-layout';
+import Native from 'native';
 
 const TWO_POINT_FIVE_MINUTES = 1000 * 60 * 2.5;
 
@@ -18,6 +20,8 @@ type Props = {
   pageTitle: ?string,
   theme: string,
   updateBlockHeight: () => void,
+  toggleEnhancedLayout: () => void,
+  enhancedLayout: boolean,
 };
 
 class App extends React.PureComponent<Props> {
@@ -41,17 +45,18 @@ class App extends React.PureComponent<Props> {
   }
 
   componentDidMount() {
-    const { updateBlockHeight } = this.props;
+    const { updateBlockHeight, toggleEnhancedLayout } = this.props;
 
     const mainContent = document.getElementById('content');
     this.mainContent = mainContent;
-
     if (this.mainContent) {
       this.mainContent.addEventListener('scroll', throttle(this.scrollListener, 750));
     }
 
     ReactModal.setAppElement('#window'); // fuck this
 
+    this.enhance = new EnhancedLayoutListener(() => toggleEnhancedLayout());
+
     updateBlockHeight();
     setInterval(() => {
       updateBlockHeight();
@@ -81,6 +86,8 @@ class App extends React.PureComponent<Props> {
     if (this.mainContent) {
       this.mainContent.removeEventListener('scroll', this.scrollListener);
     }
+
+    this.enhance = null;
   }
 
   setTitleFromProps = (title: ?string) => {
@@ -96,12 +103,22 @@ class App extends React.PureComponent<Props> {
   }
 
   mainContent: ?HTMLElement;
+  enhance: ?any;
 
   render() {
+    const { enhancedLayout } = this.props;
+
     return (
       <div id="window" onContextMenu={e => openContextMenu(e)}>
         <Header />
         <main className="page">
+          {enhancedLayout && (
+            <img
+              alt="Friendly gerbil"
+              className="yrbl--enhanced"
+              src={Native.imagePath('gerbil-happy.png')}
+            />
+          )}
           <SideBar />
           <div className="content" id="content">
             <Router />

src/renderer/component/emailCollection/index.js

@@ -0,0 +1,29 @@
+import * as SETTINGS from 'constants/settings';
+import { connect } from 'react-redux';
+import { doSetClientSetting } from 'redux/actions/settings';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
+import { selectEmailToVerify, selectUser } from 'lbryinc';
+import FirstRunEmailCollection from './view';
+
+const select = state => ({
+  emailCollectionAcknowledged: makeSelectClientSetting(SETTINGS.EMAIL_COLLECTION_ACKNOWLEDGED)(
+    state
+  ),
+  email: selectEmailToVerify(state),
+  user: selectUser(state),
+});
+
+const perform = dispatch => () => ({
+  completeFirstRun: () => {
+    dispatch(doSetClientSetting(SETTINGS.EMAIL_COLLECTION_ACKNOWLEDGED, true));
+    dispatch(doSetClientSetting(SETTINGS.FIRST_RUN_COMPLETED, true));
+  },
+  acknowledgeEmail: () => {
+    dispatch(doSetClientSetting(SETTINGS.EMAIL_COLLECTION_ACKNOWLEDGED, true));
+  },
+});
+
+export default connect(
+  select,
+  perform
+)(FirstRunEmailCollection);

src/renderer/component/emailCollection/view.jsx

@@ -0,0 +1,46 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+import UserEmailNew from 'component/userEmailNew';
+import UserEmailVerify from 'component/userEmailVerify';
+
+type Props = {
+  email: string,
+  emailCollectionAcknowledged: boolean,
+  user: ?{ has_verified_email: boolean },
+  completeFirstRun: () => void,
+  acknowledgeEmail: () => void,
+};
+
+class FirstRunEmailCollection extends React.PureComponent<Props> {
+  render() {
+    const {
+      completeFirstRun,
+      email,
+      user,
+      emailCollectionAcknowledged,
+      acknowledgeEmail,
+    } = this.props;
+
+    // this shouldn't happen
+    if (!user) {
+      return null;
+    }
+
+    const cancelButton = <Button button="link" onClick={completeFirstRun} label={__('Not Now')} />;
+    if (user && !user.has_verified_email && !email) {
+      return <UserEmailNew cancelButton={cancelButton} />;
+    } else if (user && !user.has_verified_email) {
+      return <UserEmailVerify cancelButton={cancelButton} />;
+    }
+
+    // Try to acknowledge here so users don't see an empty email screen in the first run banner
+    if (!emailCollectionAcknowledged) {
+      acknowledgeEmail();
+    }
+
+    return null;
+  }
+}
+
+export default FirstRunEmailCollection;

src/renderer/component/firstRun/index.js

@@ -0,0 +1,29 @@
+import * as SETTINGS from 'constants/settings';
+import { connect } from 'react-redux';
+import { selectUser } from 'lbryinc';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
+import { doSetClientSetting } from 'redux/actions/settings';
+import FirstRun from './view';
+
+const select = state => ({
+  emailCollectionAcknowledged: makeSelectClientSetting(SETTINGS.EMAIL_COLLECTION_ACKNOWLEDGED)(
+    state
+  ),
+  welcomeAcknowledged: makeSelectClientSetting(SETTINGS.NEW_USER_ACKNOWLEDGED)(state),
+  firstRunComplete: makeSelectClientSetting(SETTINGS.FIRST_RUN_COMPLETED)(state),
+  user: selectUser(state),
+});
+
+const perform = dispatch => ({
+  acknowledgeWelcome: () => {
+    dispatch(doSetClientSetting(SETTINGS.NEW_USER_ACKNOWLEDGED, true));
+  },
+  completeFirstRun: () => {
+    dispatch(doSetClientSetting(SETTINGS.FIRST_RUN_COMPLETED, true));
+  },
+});
+
+export default connect(
+  select,
+  perform
+)(FirstRun);

src/renderer/component/firstRun/view.jsx

@@ -0,0 +1,115 @@
+// @flow
+import React, { PureComponent } from 'react';
+import posed from 'react-pose';
+import Button from 'component/button';
+import EmailCollection from 'component/emailCollection';
+import Native from 'native';
+
+//
+// Animation for items inside banner
+// The height for items must be static (in banner.scss) so that we can reliably animate into the banner and be vertically centered
+//
+const spring = {
+  type: 'spring',
+  stiffness: 100,
+  damping: 10,
+  mass: 1,
+};
+
+const Welcome = posed.div({
+  hide: { opacity: 0, y: '310px', ...spring },
+  show: { opacity: 1, ...spring },
+});
+
+const Email = posed.div({
+  hide: { opacity: 0, y: '0', ...spring },
+  show: { opacity: 1, y: '-310px', ...spring, delay: 175 },
+});
+
+const Help = posed.div({
+  hide: { opacity: 0, y: '0', ...spring },
+  show: { opacity: 1, y: '-620px', ...spring, delay: 175 },
+});
+
+type Props = {
+  welcomeAcknowledged: boolean,
+  emailCollectionAcknowledged: boolean,
+  firstRunComplete: boolean,
+  acknowledgeWelcome: () => void,
+  completeFirstRun: () => void,
+};
+
+export default class FirstRun extends PureComponent<Props> {
+  render() {
+    const {
+      welcomeAcknowledged,
+      emailCollectionAcknowledged,
+      firstRunComplete,
+      acknowledgeWelcome,
+      completeFirstRun,
+    } = this.props;
+
+    if (firstRunComplete) {
+      return null;
+    }
+
+    const showWelcome = !welcomeAcknowledged;
+    const showEmail = !emailCollectionAcknowledged && welcomeAcknowledged;
+    const showHelp = !showWelcome && !showEmail;
+
+    return (
+      <div className="banner banner--first-run">
+        <img
+          alt="Friendly gerbil"
+          className="yrbl--first-run banner__item"
+          src={Native.imagePath('gerbil-happy.png')}
+        />
+
+        <div className="banner__item">
+          <div className="banner__item--static-for-animation">
+            <Welcome className="banner__content" pose={showWelcome ? 'show' : 'hide'}>
+              <div>
+                <header className="card__header">
+                  <h1 className="card__title">{__('Hi There')}</h1>
+                </header>
+                <div className="card__content">
+                  <p>
+                    {__('Using LBRY is like dating a centaur. Totally normal up top, and')}{' '}
+                    <em>{__('way different')}</em> {__('underneath.')}
+                  </p>
+                  <p>{__('Up top, LBRY is similar to popular media sites.')}</p>
+                  <p>
+                    {__(
+                      'Below, LBRY is controlled by users -- you -- via blockchain and decentralization.'
+                    )}
+                  </p>
+                  <div className="card__actions">
+                    <Button button="primary" onClick={acknowledgeWelcome} label={__("I'm In")} />
+                  </div>
+                </div>
+              </div>
+            </Welcome>
+          </div>
+          <div className="banner__item--static-for-animation">
+            <Email pose={showEmail ? 'show' : 'hide'}>
+              <EmailCollection />
+            </Email>
+          </div>
+          <div className="banner__item--static-for-animation">
+            <Help pose={showHelp ? 'show' : 'hide'}>
+              <header className="card__header">
+                <h1 className="card__title">{__('You Are Awesome!')}</h1>
+              </header>
+              <div className="card__content">
+                <p>{__("Check out some of the neat files below me. I'll see you around!")}</p>
+                <div className="card__actions">
+                  <Button button="primary" onClick={completeFirstRun} label={__('See You Later')} />
+                </div>
+              </div>
+            </Help>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/renderer/component/socialShare/view.jsx

@@ -61,7 +61,7 @@ class SocialShare extends React.PureComponent<Props> {
           <div className="card__content">
             <label className="card__subtitle">{__('Web link')}</label>
             <CopyableText copyable={speechURL} />
-            <div className="card__actions card__actions--center card__actions--top-space">
+            <div className="card__actions card__actions--center">
               <ToolTip onComponent body={__('Facebook')}>
                 <Button
                   iconColor="blue"
@@ -95,7 +95,7 @@ class SocialShare extends React.PureComponent<Props> {
         <div className="card__content">
           <label className="card__subtitle">{__('LBRY App link')}</label>
           <CopyableText copyable={lbryURL} noSnackbar />
-          <div className="card__actions card__actions--center card__actions--top-space">
+          <div className="card__actions card__actions--center">
             <ToolTip onComponent body={__('Facebook')}>
               <Button
                 iconColor="blue"

src/renderer/component/userEmailNew/view.jsx

@@ -42,16 +42,14 @@ class UserEmailNew extends React.PureComponent<Props, State> {
 
     return (
       <React.Fragment>
-        <p>
-          {__("We'll let you know about LBRY updates, security issues, and great new content.")}
-        </p>
+        <header className="card__header">
+          <h2 className="card__title">{__("Don't Miss Out")}</h2>
+          <p className="card__subtitle">
+            {__("We'll let you know about LBRY updates, security issues, and great new content.")}
+          </p>
+        </header>
 
-        <p>
-          {__(
-            'In addition, your email address will never be sold and you can unsubscribe at any time.'
-          )}
-        </p>
-        <Form onSubmit={this.handleSubmit}>
+        <Form className="card__content" onSubmit={this.handleSubmit}>
           <FormRow>
             <FormField
               stretch
@@ -66,10 +64,13 @@ class UserEmailNew extends React.PureComponent<Props, State> {
           </FormRow>
 
           <div className="card__actions">
-            <Submit label="Submit" disabled={isPending} />
+            <Submit label="Submit" disabled={isPending || !this.state.email} />
             {cancelButton}
           </div>
         </Form>
+        <p className="help">
+          {__('Your email address will never be sold and you can unsubscribe at any time.')}
+        </p>
       </React.Fragment>
     );
   }