Quick and simple demo page

Author: mderrick

demo/generateConfig.js

@@ -41,7 +41,7 @@ module.exports = ({ optimize, extractCss, hot, publicPath = '/' }) => {
                     : 'style!' + cssString
             }, {
                 test: /\.css$/,
-                include: new RegExp(pkg.name + '/dist/'),
+                include: [new RegExp(pkg.name + '/dist/'), new RegExp('reset-css')],
                 loader: extractCss
                     ? ExtractTextPlugin.extract('style', 'css')
                     : 'style!css'

demo/package.json

@@ -1,8 +1,9 @@
 {
   "name": "react-html5video-demo",
   "dependencies": {
-    "react-html5video": "file:../",
     "react": "^15.4.0",
-    "react-dom": "^15.4.0"
+    "react-dom": "^15.4.0",
+    "react-html5video": "file:../",
+    "reset-css": "^2.2.0"
   }
 }

demo/src/components/App.css

@@ -1,9 +1,30 @@
 .component {
     padding: 20px;
-    border: 1px solid #222;
+    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
+}
+
+.header {
+    margin-bottom: 20px;
+}
+
+.title {
+    font-size: 30px;
+    margin-bottom: 5px;
+}
+
+.link {
+    color: #2492a8;
 }
 
 .video {
     width: 634px;
     height: 356px;
+    margin: 0 auto;
+}
+
+
+.videoListItem {
+    background-color: #efefef;
+    padding: 20px;
+    margin-bottom: 20px;
 }

demo/src/components/App.js

@@ -1,48 +1,62 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { DefaultPlayer as Video } from 'react-html5video';
 import 'react-html5video/dist/styles.css';
 import styles from './App.css';
-import pkg from './../../../package.json';
+import 'reset-css/reset.css';
 import vttEn from './../../assets/sintel-en.vtt';
 import vttEs from './../../assets/sintel-es.vtt';
 
 const sintelTrailer = 'https://download.blender.org/durian/trailer/sintel_trailer-720p.mp4';
 const bigBuckBunny = 'http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_h264.mov';
-const failingSource = 'https://github.com/mderrick/react-html5video';
 
-const App = () => (
-    <div className={styles.component}>
-        <h1 className={styles.copy}>This is a demo for "{pkg.name}".</h1>
-        <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>
-        <Video
-            src={bigBuckBunny}
-            className={styles.video}>
-        </Video>
-        <Video
-            src={failingSource}
-            className={styles.video}>
-        </Video>
-        <Video className={styles.video}>
-            <source src={failingSource} type="video/mp4" />
-            <source src={sintelTrailer} type="video/mp4" />
-        </Video>
-        <Video className={styles.video}>
-            <source src={failingSource} type="video/mp4" />
-        </Video>
-    </div>
-);
+class App extends Component {
+    render () {
+        return (
+            <div className={styles.component}>
+                <header className={styles.header}>
+                    <h1 className={styles.title}>React HTML5 Video</h1>
+                    <a className={styles.link}
+                        href="https://github.com/mderrick/react-html5video">
+                        View on GitHub &raquo;
+                    </a>
+                </header>
+                <ul className={styles.videoList}>
+                    <li className={styles.videoListItem}>
+                        <Video
+                            autoPlay
+                            ref="video1"
+                            onPlay={() => {
+                                this.refs.video2.videoEl.pause();
+                            }}
+                            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>
+                    </li>
+                    <li className={styles.videoListItem}>
+                        <Video
+                            ref="video2"
+                            onPlay={() => {
+                                this.refs.video1.videoEl.pause();
+                            }}
+                            src={bigBuckBunny}
+                            className={styles.video}>
+                        </Video>
+                    </li>
+                </ul>
+            </div>
+        );
+    }
+}
 
 export default App;

demo/src/components/App.test.js

@@ -3,7 +3,6 @@ import { shallow } from 'enzyme';
 
 import App from './App';
 import styles from './App.css';
-import pkg from './../../../package.json';
 
 describe('App', () => {
     let component;
@@ -16,7 +15,7 @@ describe('App', () => {
 
     it('contains heading text', () => {
         expect(component.find('h1').text())
-            .toEqual(`This is a demo for "${pkg.name}".`);
+            .toEqual('React HTML5 Video');
     });
 
     it('has a className', () => {