[WIP] Discovery video

package.json

@@ -117,6 +117,7 @@
     "config": "1.20.3",
     "express": "4.13.4",
     "extract-text-webpack-plugin": "1.0.1",
+    "file-loader": "0.8.5",
     "helmet": "2.1.0",
     "isomorphic-fetch": "2.2.1",
     "normalize.css": "4.1.1",

src/disco/containers/DiscoPane.js

@@ -5,29 +5,61 @@ import { gettext as _, camelCaseProps } from 'core/utils';
 
 import Addon from 'disco/components/Addon';
 
+import mp4Video from 'disco/video/AddOns.mp4';
+import webmVideo from 'disco/video/AddOns.webm';
+import videoPoster from 'disco/img/AddOnsPoster.jpg';
+
 
 class DiscoPane extends React.Component {
   static propTypes = {
     results: PropTypes.arrayOf(PropTypes.object),
   }
 
+  constructor() {
+    super();
+    this.state = {
+      showVideo: false,
+    };
+  }
+
+  showVideo = (e) => {
+    e.preventDefault();
+    this.setState({showVideo: true});
+    this.refs.video.play();
+  }
+
+  hideVideo = (e) => {
+    e.preventDefault();
+    this.setState({showVideo: false});
+    this.refs.video.pause();
+  }
+
   render() {
     const { results } = this.props;
+    const { showVideo } = this.state;
     return (
       <div id="app-view" ref="container">
-        <header>
+        <header className={showVideo ? 'show-video' : ''}>
           <div className="content">
             <h1>{_('Personalize Your Firefox')}</h1>
             <p>{_(`There are thousands of add-ons that let you make Firefox all your
                own—everything from fun visual themes to powerful tools and features.
                Here are a few great ones to check out.`)}</p>
           </div>
-          <a href="#" className="play-video">
-            <p>
-              <span>{_('Click to play')}</span>
+          <div className="video">
+            <div className="video-show" onClick={this.showVideo}>
+              <span className="video-show-button">{_('Click to play')}</span>
               <span className="visually-hidden">{_('to find out more about add-ons')}</span>
-            </p>
-          </a>
+            </div>
+            <video autoPlay={showVideo} controls={showVideo} crossOrigin="anonymous"
+                   poster={videoPoster} ref="video" height="285" width="510">
+              <source src={mp4Video} type="video/mp4" />
+              <source src={webmVideo} type="video/webm" />
+            </video>
+            <div className="video-close">
+              <a href="#" onClick={this.hideVideo}>{_('Close video')}</a>
+            </div>
+          </div>
         </header>
         {results.map((item, i) => <Addon {...camelCaseProps(item)} key={i} />)}
       </div>

src/disco/css/App.scss

@@ -2,6 +2,10 @@
 @import "~core/css/inc/lib";
 @import "~disco/css/inc/vars";
 
+$video-small-height: 120px;
+$video-small-width: 210px;
+$video-big-height: 283px;
+$video-big-width: 510px;
 
 html,
 body {
@@ -32,11 +36,15 @@ header {
   display: flex;
   border-bottom: 1px solid $header-border-color;
   flex-direction: row;
+  justify-content: space-between;
   margin-bottom: 40px;
+  min-height: 160px;
   padding-bottom: 40px;
 
   .content {
-    flex-grow: 1;
+    opacity: 1;
+    transition: 250ms;
+    width: 425px;
   }
 
   h1 {
@@ -59,26 +67,153 @@ header {
     margin-bottom: 0;
   }
 
-  .play-video {
-    background: #ccc;
-    border-radius: 5px;
+  .video {
     display: block;
-    flex-grow: 0;
-    margin-left: 50px;
-    min-height: 120px;
-    min-width: 215px;
+  }
+}
+
+.video {
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 0;
+  height: 120px;
+  position: relative;
+  text-align: center;
+  transition: 250ms;
+  width: 215px;
+
+  &:hover {
+    color: #fff;
+  }
+
+  .video-show {
+    // background: rgba(0, 0, 0, 0.60);
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    transition: 250ms;
 
     &:hover {
-      color: #fff;
-      background: #666;
+      background: rgba(0, 0, 0, 0);
+
+      .video-show-button {
+        background: rgba(0, 0, 0, 0.6);
+      }
     }
+  }
+}
+
+.video-show-button {
+  padding: 10px;
+  background: rgba(0, 0, 0, 0.25);
+  color: #ffffff;
+  transition: background 250ms;
+}
+
+.video,
+.video video {
+  border-radius: 5px;
+  height: $video-small-height;
+  width: $video-small-width;
+}
+
+.video {
+  transition: 250ms;
+}
+
+.video video {
+  transition: 250ms;
+}
 
-    p {
-      align-items: center;
-      display: flex;
-      height: 100%;
-      justify-content: center;
-      margin-top: 0;
+.video-close {
+  display: none;
+
+  a {
+    color: #0996F8;
+    line-height: 40px;
+    height: 40px;
+    margin: 0 auto;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
     }
   }
 }
+
+header.show-video {
+  height: $video-big-height + 40px;
+
+  .content {
+    transform: translateX(-300px);
+    opacity: 0;
+    visibility: none;
+  }
+
+  .video {
+    transform: translateX(-85px);
+    height: $video-big-height;
+    width: $video-big-width;
+  }
+
+  .video video {
+    height: $video-big-height;
+    width: $video-big-width;
+    // transform: scale(2.43,2.43) translate(-100px, 30px);
+  }
+
+  .video-show {
+    display: none;
+  }
+
+  .video-close {
+    display: block;
+  }
+}
+
+// header.show-video {
+//   justify-content: flex-end;
+//   min-height: 323px;
+//
+//   .video-show {
+//     display: none;
+//   }
+//
+//   .video-close {
+//     display: inline-block;
+//   }
+//
+//   .video,
+//   .video video {
+//     height: $video-big-height;
+//     width: $video-big-width
+//   }
+//
+//   .content {
+//     opacity: 0;
+//     transform: translateX(-425px);
+//   }
+//
+//   .video {
+//     cursor: auto;
+//     transform: translateX(-85px);
+//   }
+//
+//   // padding-bottom: 0;
+//
+//   // .video-wrapper {
+//   //   display: block;
+//   //   margin: 0 auto;
+//   //   width: 510px;
+//   // }
+//   //
+//   // video {
+//   //   width: 100%;
+//   // }
+// }

webpack-isomorphic-tools-config.js

@@ -60,5 +60,12 @@ module.exports = {
         }
       },
     },
+    videos: {
+      extensions: [
+        'mp4',
+        'webm',
+      ],
+      parser: WebpackIsomorphicToolsPlugin.url_loader_parser,
+    },
   },
 };

webpack.dev.config.babel.js

@@ -73,6 +73,17 @@ export default Object.assign({}, webpackConfig, {
     }, {
       test: /\.svg$/,
       loader: 'url?limit=10000&mimetype=image/svg+xml',
+    }, {
+      test: /\.jpg/,
+      loader: 'url?limit=10000&mimetype=image/jpg',
+    }, {
+      test: /\.mp4$/,
+      loader: 'file',
+      query: {minemtype: 'video/mp4'},
+    }, {
+      test: /\.webm$/,
+      loader: 'file',
+      query: {minemtype: 'video/webm'},
     }],
   },
   plugins: [