Feature/storybook video widget

package.json

@@ -27,9 +27,9 @@
     "material-design-icons": "^3.0.1",
     "mixpanel-browser": "2.30.1",
     "node-sass": "^4.13.1",
-    "react": "16.11.0",
+    "react": "^16.12.0",
     "react-cookie-banner": "^4.0.0",
-    "react-dom": "16.11.0",
+    "react-dom": "^16.12.0",
     "react-loader-spinner": "^3.1.5",
     "react-magic-slider-dots": "1.1.3",
     "react-mailchimp-subscribe": "2.1.0",
@@ -40,7 +40,8 @@
     "react-typing-animation": "1.6.2",
     "react-typing-effect": "2.0.2",
     "redux": "4.0.4",
-    "slick-carousel": "1.8.1"
+    "slick-carousel": "1.8.1",
+    "video-react": "^0.14.1"
   },
   "devDependencies": {
     "@babel/core": "7.7.2",

public/index.html

@@ -5,6 +5,10 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <!-- Current Font -->
     <link href="https://fonts.googleapis.com/css?family=Karla|Poppins&display=swap" rel="stylesheet"  />
+
+    <!-- React Video SCSS -->
+    <link rel="stylesheet" href="/css/video-react.css" />
+
     <!-- Material Icons -->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1" />

src/components/elements/Video/Video.js

@@ -0,0 +1,88 @@
+// @flow
+import React, { Component } from 'react';
+import { toInteger } from 'lodash';
+import { Player } from 'video-react';
+import { Mixpanel } from '../../../Mixpanel';
+import { Icon } from '..';
+
+import './Video.scss';
+
+type Props = {
+  videoId: string,
+  id: string,
+  header: string,
+};
+
+type State = {
+  videoClosed: boolean,
+};
+
+export default class Video extends Component<Props, State> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      videoTimerSet: false,
+      videoClosed: false,
+    };
+  }
+
+  componentDidMount() {
+    // this.refs.player.subscribeToStateChange(this.handleVideoState.bind(this));
+    this.handleVideoState = this.handleVideoState.bind(this);
+  }
+
+  render() {
+    const { videoId, header, id } = this.props;
+
+    const { videoClosed } = this.state;
+
+    return (
+      <div>
+        {!videoClosed && (
+          <div className="video" id={id}>
+            <div className="video__header">
+              <div className="video__header_caption">{header}</div>
+              <Icon
+                icon="close"
+                onClick={this.handleVideoClose.bind(this)}
+                classOverride="video__header_icon"
+              />
+            </div>
+            {
+              // <Player
+              //   ref="player"
+              //   playsInline
+              //   // poster="/assets/poster.png"
+              //   src={videoId}
+              // />
+            }
+            <Player>
+              <source src={videoId} />
+            </Player>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  handleVideoClose = () => {
+    const { videoClosed } = this.state;
+    const { id } = this.props;
+
+    Mixpanel.track(`${id} / Video / ${videoClosed}`);
+
+    this.setState({
+      videoClosed: true,
+    });
+  };
+
+  handleVideoState = state => {
+    const { videoTimerSet } = this.state;
+    const { id } = this.props;
+
+    if (toInteger(state.currentTime) === 30 && !videoTimerSet) {
+      this.setState({ videoTimerSet: true });
+      Mixpanel.track(`${id} / Video / ${toInteger(state.currentTime)}`);
+    }
+  };
+}

src/components/elements/Video/Video.scss

@@ -0,0 +1,47 @@
+@import '../../../styles/main';
+
+.video {
+  @include margin(top bottom, 4);
+  @include margin(left right, 2);
+  max-width: 560px;
+
+  &__header {
+    @include row;
+    align-items: center;
+    justify-content: space-between;
+
+    &_caption {
+      @include margin(left, 0);
+      @include caption-left;
+    }
+
+    // Icon overrides
+    .icon-container .button {
+      @include margin(right, reset);
+      color: $grey;
+    }
+  }
+}
+
+// Video Player
+
+:global {
+  .video-react {
+    @include modal-elevation;
+    border-radius: 3px;
+    display: block;
+    margin: 100px auto;
+    max-width: 520px;
+    outline: none !important;
+    padding-top: 30% !important;
+    width: 50% !important;
+  }
+  .video-react-video {
+    outline: none !important;
+  }
+  .video-react-big-play-button {
+    background-color: $primary !important;
+    border: 0 !important;
+    outline: none !important;
+  }
+}

src/components/elements/index.js

@@ -11,3 +11,4 @@ export { default as Modal } from './Modal/Modal.js';
 export { default as OnboardingCard } from './OnboardingCard/OnboardingCard.js';
 export { default as Tag } from './Tag/Tag';
 export { default as Toggle } from './Toggle/Toggle';
+export { default as Video } from './Video/Video';

src/styles/main.scss

@@ -6,6 +6,9 @@
 // import material icons
 @import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
 
+// import react-video styles
+@import '~video-react/styles/scss/video-react';
+
 // Atoms
 
 @import 'atoms/align';

stories/video.stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+import { storiesOf } from "@storybook/react";
+// import { action } from "@storybook/addon-actions";
+// import { linkTo } from "@storybook/addon-links";
+// import { Welcome } from "@storybook/react/demo";
+import { Video } from '../src/components/elements'
+
+storiesOf("Elements/Video", module)
+  .add("Video", () => (
+    <Video
+      id="Strategy"
+      header="Intro to Strategy:"
+      videoId="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
+    />
+  ))
+  ;