Initial DefaultPlayer and demo setup using HoC

Basic setup to be iterated upon

Author: mderrick

demo/assets/sintel-en.vtt

@@ -0,0 +1,19 @@
+WEBVTT - Sintel Caption File
+
+Sage
+00:00:12.000 --> 00:00:15.000
+What brings you to the land
+of the gatekeepers?
+
+Searching
+00:00:18.500 --> 00:00:20.500
+I'm searching for someone.
+
+Quest
+00:00:36.500 --> 00:00:39.000
+A dangerous quest for a lone hunter.
+
+Alone
+00:00:41.500 --> 00:00:44.000
+I've been alone for as long
+as I can remember.

demo/assets/sintel-es.vtt

@@ -0,0 +1,18 @@
+WEBVTT - Spanish Sintel Caption File
+
+Sage
+00:00:12.000 --> 00:00:15.000
+Que te trae a la tierra 
+de los porteros?
+
+Searching
+00:00:18.500 --> 00:00:20.500
+Estoy buscando a alguien.
+
+Quest
+00:00:36.500 --> 00:00:39.000
+Una busqueda peligrosa para un cazador solitario.
+
+Alone
+00:00:41.500 --> 00:00:44.000
+He estado sola desde que recuerdo.  

demo/generateConfig.js

@@ -46,7 +46,7 @@ module.exports = ({ optimize, extractCss, hot, publicPath = '/' }) => {
                     ? ExtractTextPlugin.extract('style', 'css')
                     : 'style!css'
             }, {
-                test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|svg)(\?.*)?$/,
+                test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|svg|vtt)(\?.*)?$/,
                 loader: 'file'
             }]
         },

demo/src/components/App.js

@@ -1,24 +1,29 @@
 import React from 'react';
-import { default as Video, Overlay, Controls } from 'react-html5video';
+import { DefaultPlayer as Video } from 'react-html5video';
 import 'react-html5video/dist/styles.css';
-
-import pkg from './../../../package.json';
 import styles from './App.css';
+import pkg from './../../../package.json';
+import vttEn from './../../assets/sintel-en.vtt';
+import vttEs from './../../assets/sintel-es.vtt';
 
-const videoUrl = 'http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_h264.mov';
+const sintelTrailer = 'http://media.w3.org/2010/05/sintel/trailer.mp4';
 
 const App = () => (
     <div className={styles.component}>
         <h1 className={styles.copy}>This is a demo for "{pkg.name}".</h1>
-        <Video
-            className={styles.video}
-            controls
-            autoPlay
-            loop
-            muted>
-                <source src={videoUrl} type="video/mp4" />
-                <Overlay />
-                <Controls />
+        <Video className={styles.video}>
+            <source src={sintelTrailer} type="video/mp4" />
+            <track
+                label="English"
+                kind="subtitles"
+                srcLang="en"
+                src={vttEn}
+                default />
+            <track
+                label="Español"
+                kind="subtitles"
+                srcLang="es"
+                src={vttEs} />
         </Video>
     </div>
 );

generateConfig.js

@@ -9,7 +9,7 @@ const distPath = path.resolve(__dirname, 'dist');
 module.exports = (options = {}) => {
     return {
         entry: [
-            path.resolve(srcPath, 'Entry.js')
+            path.resolve(srcPath, 'entry.js')
         ],
         target: 'web',
         output: {
@@ -27,6 +27,12 @@ module.exports = (options = {}) => {
                 commonjs2: 'react',
                 commonjs: 'react',
                 amd: 'react'
+            },
+            'react-dom': {
+                root: 'ReactDOM',
+                commonjs2: 'react-dom',
+                commonjs: 'react-dom',
+                amd: 'react-dom'
             }
         }],
         module: {
@@ -40,7 +46,7 @@ module.exports = (options = {}) => {
             }, {
                 test: /\.css$/,
                 include: srcPath,
-                loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1&localIdentName=[hash:base64:5]&hashPrefix=react-html5video&-autoprefixer!postcss')
+                loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[hash:base64:5]&hashPrefix=react-html5video&-autoprefixer!postcss')
             }, {
                 test: /\.(eot|ttf|woff|woff2|svg)(\?.*)?$/,
                 loader: 'url'

package.json

@@ -43,7 +43,7 @@
       "json"
     ],
     "moduleNameMapper": {
-      "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ico)$": "<rootDir>/__mocks__/fileMock.js",
+      "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ico|vtt)$": "<rootDir>/__mocks__/fileMock.js",
       "^.+\\.css$": "identity-obj-proxy"
     },
     "testPathIgnorePatterns": [

src/DefaultPlayer/Captions/Captions.css

@@ -0,0 +1,30 @@
+.component {
+    position: relative;
+    color: #fff;
+}
+
+.button {}
+
+.trackList {
+    position: absolute;
+    left: 0;
+    bottom: 100%;
+    display: none;
+    background: #000;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.component:hover .trackList {
+    display: block;
+}
+
+.trackItem {
+    padding: 5px;
+}
+
+.activeTrack {
+    composes: trackItem;
+    text-decoration: underline;
+}

src/DefaultPlayer/Captions/Captions.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import styles from './Captions.css';
+
+export default ({ textTracks, getVideoEl, forceUpdateState, className }) => {
+    return (
+        <div className={[
+            styles.component,
+            className
+        ].join(' ')}>
+            <button className={styles.button}>
+                CC
+            </button>
+            <ul className={styles.trackList}>
+                { textTracks && Array.prototype.slice.call(textTracks).map((track, i) => (
+                    <li
+                        className={track.mode === 'showing'
+                            ? styles.activeTrack
+                            : styles.trackItem}
+                        onClick={() => {
+                            const videoEl = getVideoEl()
+                            if (track.mode !== 'showing') {
+                                videoEl.textTracks[i].mode = 'showing';
+                            } else {
+                                videoEl.textTracks[i].mode = 'disabled';
+                            }
+                            // There is no `onTrackChange` event so we
+                            // have to forcibly update the video state
+                            // in order for the UI to update.
+                            forceUpdateState();
+                        }}
+                        key={track.language}>
+                        { track.label }
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};

src/DefaultPlayer/DefaultPlayer.css

@@ -0,0 +1,19 @@
+.component {
+    position: relative;
+    font-family: Helvetica;
+    font-size: 11px;
+}
+
+.video {
+    width: 100%;
+    height: 100%;
+}
+
+.controls {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    height: 34px;
+    display: flex;
+}

src/DefaultPlayer/DefaultPlayer.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import video from './../Video/Video';
+import styles from './DefaultPlayer.css';
+import PlayPause from './PlayPause/PlayPause';
+import Seek from './Seek/Seek';
+import Volume from './Volume/Volume';
+
+const DefaultPlayer = (props) => {
+    const {
+        video,
+        children,
+        className,
+        ...restProps
+    } = props;
+    return (
+        <div className={[
+            styles.component,
+            className
+        ].join(' ')}>
+            <video
+                className={styles.video}
+                {...restProps}>
+                { children }
+            </video>
+            <div className={styles.controls}>
+                <PlayPause {...video} />
+                <Seek {...video} />
+                <Volume {...video} />
+            </div>
+        </div>
+    );
+};
+
+export default video(DefaultPlayer);