Merge pull request #103 from back4app/video_tutorial_test

feat: Add VideoTutorial components

Author: paivaric

package.json

@@ -54,6 +54,7 @@
     "passport-local": "^1.0.0",
     "popper.js": "^1.12.9",
     "react-file-reader": "^1.1.4",
+    "react-player": "^1.7.0",
     "react-syntax-highlighter": "^9.0.0",
     "react-tabs": "^2.2.2",
     "sweetalert2": "^7.28.10",

src/components/Toolbar/Toolbar.react.js

@@ -45,7 +45,7 @@ let Toolbar = (props) => {
             <span className={styles.details}>
               {props.details}
             </span>
-            {props.helplink}
+            {props.helpsection}
           </div>
         </div>
       </div>

src/components/VideoTutorialButton/VideoTutorialButton.react.js

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import PropTypes from 'lib/PropTypes';
+import styles from 'components/VideoTutorialButton/VideoTutorialButton.scss';
+import Position from 'lib/Position';
+import Popover from 'components/Popover/Popover.react';
+import ReactPlayer from 'react-player';
+
+export default class VideoTutorialButton extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      videoTutorialModal: null
+    };
+  }
+
+  componentWillMount() {
+    if (this.props.playing) {
+      this.openVideoTutorialModal();
+    }
+  }
+
+  openVideoTutorialModal() {
+    const { url } = this.props;
+    this.setState({
+      videoTutorialModal: (
+        <Popover
+          fadeIn={true}
+          fixed={true}
+          position={new Position(0, 0)}
+          modal={true}
+          color='rgba(17,13,17,0.8)'
+          onExternalClick={() => this.setState({ videoTutorialModal: null })}>
+          <div className={styles.modal}>
+            <ReactPlayer
+              url={url}
+              controls
+              width="100%"
+              height="100%"
+              playing
+            />
+          </div>
+        </Popover>
+      )
+    });
+  }
+
+  render() {
+    const classes = [styles.button, styles['b4a-green'], styles.unselectable];
+    return (
+      <a
+        href='javascript:;'
+        role='button'
+        className={classes.join(' ')}
+        style={this.props.additionalStyles}
+        onClick={() => this.openVideoTutorialModal()}>
+        <span>Video Tutorial</span>
+        {this.state.videoTutorialModal}
+      </a>
+    );
+  }
+}
+
+// Props validations
+VideoTutorialButton.propTypes = {
+  url: PropTypes.string,
+  additionalStyles: PropTypes.object.describe(
+    'Additional styles for <a> tag.'
+  )
+};

src/components/VideoTutorialButton/VideoTutorialButton.scss

@@ -0,0 +1,35 @@
+@import 'stylesheets/globals.scss';
+
+.button {
+  @include DosisFont;
+  display: inline-block;
+  height: 20px;
+  border: 1px solid;
+  line-height: 20px;
+  border-radius: 5px;
+  min-width: 90px;
+  padding: 0 16px;
+  font-size: 12px;
+  font-weight: bold;
+  color: $white;
+  background-color: #4caf50;
+  border-color: #4caf50!important;
+
+  &:hover, &:focus {
+    color: $white;
+    background-color: #81c784;
+    text-decoration: none;
+  }
+}
+
+.modal {
+  @include modalAnimation();
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 75%;
+  height: 75%;
+  background: black;
+}
+
+@include modalKeyframes();

src/dashboard/Data/Browser/B4ABrowserToolbar.react.js

@@ -9,6 +9,7 @@ import Separator      from 'components/BrowserMenu/Separator.react';
 import styles         from 'dashboard/Data/Browser/Browser.scss';
 import Toolbar        from 'components/Toolbar/Toolbar.react';
 import Button         from 'components/Button/Button.react'
+import VideoTutorialButton from 'components/VideoTutorialButton/VideoTutorialButton.react';
 
 const apiDocsButtonStyle = {
   display: 'inline-block',
@@ -59,7 +60,8 @@ let B4ABrowserToolbar = ({
     enableExportClass,
     enableSecurityDialog,
 
-    applicationId
+    applicationId,
+    playVideoTutorial
   }) => {
   let selectionLength = Object.keys(selection).length;
   let details = [];
@@ -157,6 +159,14 @@ let B4ABrowserToolbar = ({
       }}
     />
   }
+  // TODO: Set the videoTutorialUrl
+  const videoTutorialUrl = 'https://youtu.be/0Ym9-BHI8Fg';
+  const helpsection = (
+    <span>
+      {apiDocsButton}
+      <VideoTutorialButton url={videoTutorialUrl} additionalStyles={ { marginLeft: '8px', marginBottom: '4px' } } playing={playVideoTutorial} />
+    </span>
+  );
 
   return (
     <Toolbar
@@ -165,7 +175,7 @@ let B4ABrowserToolbar = ({
       section={relation ? `Relation <${relation.targetClassName}>` : `Class | ${details.join(' \u2022 ')}`}
       subsection={subsection}
       details={relation ? details.join(' \u2022 ') : ''}
-      helplink={apiDocsButton}>
+      helpsection={helpsection}>
       <a className={styles.toolbarButton} onClick={onAddRow}>
         <Icon name='plus-solid' width={14} height={14} />
         <span>Add Row</span>

src/dashboard/Data/Browser/Browser.react.js

@@ -6,6 +6,8 @@
  * the root directory of this source tree.
  */
 import { ActionTypes }                    from 'lib/stores/SchemaStore';
+import { post }                            from 'lib/AJAX';
+import AccountManager                     from 'lib/AccountManager';
 import AddColumnDialog                    from 'dashboard/Data/Browser/AddColumnDialog.react';
 import CategoryList                       from 'components/CategoryList/CategoryList.react';
 import CreateClassDialog                  from 'dashboard/Data/Browser/CreateClassDialog.react';
@@ -942,6 +944,11 @@ export default class Browser extends DashboardView {
             count = this.state.counts[className];
           }
         }
+        const user = AccountManager.currentUser();
+        let playVideoTutorial = user && user.playDatabaseBrowserTutorial;
+        if (playVideoTutorial) {
+          post(`/tutorial`, { databaseBrowser: true });
+        }
         browser = (
           <DataBrowser
             count={count}
@@ -979,7 +986,8 @@ export default class Browser extends DashboardView {
             onAddColumn={this.showAddColumn}
             onAddRow={this.addRow}
             onAddClass={this.showCreateClass}
-            err={this.state.err}/>
+            err={this.state.err}
+            playVideoTutorial={playVideoTutorial}/>
         );
       }
     }

src/dashboard/Data/Browser/DataBrowser.react.js

@@ -211,7 +211,8 @@ export default class DataBrowser extends React.Component {
           enableImport={this.context.currentApp.serverInfo.features.schemas.import}
           enableSecurityDialog={this.context.currentApp.serverInfo.features.schemas.editClassLevelPermissions}
           {...other}
-          applicationId={applicationId}/>
+          applicationId={applicationId}
+          playVideoTutorial={this.props.playVideoTutorial}/>
       </div>
     );
   }