Add styles and various fixes to the demo app

package.json

@@ -69,6 +69,7 @@
     "karma-webpack": "^1.7.0",
     "mocha": "^2.3.4",
     "node-sass": "^3.4.2",
+    "normalize.css": "^3.0.3",
     "react": "^0.14.0",
     "react-addons-test-utils": "^0.14.3",
     "react-dom": "^0.14.0",

src/demo/.scss-lint.yml

@@ -0,0 +1,6 @@
+linters:
+  PropertySortOrder:
+    order: smacss
+  PropertySpelling:
+    extra_properties:
+      - composes

src/demo/App.js

@@ -1,6 +1,10 @@
 import React, { Component } from 'react'
 
+import 'normalize.css/normalize.css'
+import './defaults.scss'
+import './App.scss'
 import './Range.scss'
+
 import ReactPlayer from '../ReactPlayer'
 
 export default class App extends Component {
@@ -12,7 +16,11 @@ export default class App extends Component {
     loaded: 0
   }
   load = url => {
-    this.setState({ url, playing: true })
+    this.setState({
+      url,
+      played: 0,
+      loaded: 0
+    })
   }
   playPause = () => {
     this.setState({ playing: !this.state.playing })
@@ -49,52 +57,144 @@ export default class App extends Component {
     }
     this.setState(config)
   }
+  renderLoadButton = (url, label) => {
+    return (
+      <button onClick={() => this.load(url)}>
+        { label }
+      </button>
+    )
+  }
   render () {
     return (
-      <div>
-        <h1>rmp</h1>
-        <ReactPlayer
-          ref='player'
-          url={this.state.url}
-          playing={this.state.playing}
-          volume={this.state.volume}
-          onProgress={this.onProgress}
-          soundcloudConfig={this.state.soundcloudConfig}
-          vimeoConfig={this.state.vimeoConfig}
-          youtubeConfig={this.state.youtubeConfig}
-          onPlay={() => console.log('onPlay')}
-          onPause={() => console.log('onPause')}
-          onBuffer={() => console.log('onBuffer')}
-          onEnded={() => console.log('onEnded')}
-        />
-        <button onClick={this.stop}>Stop</button>
-        <button onClick={this.playPause}>{this.state.playing ? 'Pause' : 'Play'}</button>
-        <button onClick={this.load.bind(this, 'https://www.youtube.com/watch?v=oUFJJNQGwhk')}>Youtube video</button>
-        <button onClick={this.load.bind(this, 'https://soundcloud.com/miami-nights-1984/accelerated')}>Soundcloud song</button>
-        <button onClick={this.load.bind(this, 'https://vimeo.com/90509568')}>Vimeo video</button>
-        <button onClick={this.load.bind(this, 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')}>MP4 video</button>
-        <button onClick={this.load.bind(this, 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv')}>OGV video</button>
-        <button onClick={this.load.bind(this, 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm')}>WEBM video</button>
-        <input ref='url' placeholder='url' />
-        <button onClick={() => { this.load(this.refs.url.value) }}>Load URL</button>
-        <hr />
-        seek: <input
-          type='range' min={0} max={1} step='any'
-          value={this.state.played}
-          onMouseDown={this.onSeekMouseDown}
-          onChange={this.onSeekChange}
-          onMouseUp={this.onSeekMouseUp}
-        />
-        played: <progress max={1} value={this.state.played} />
-        loaded: <progress max={1} value={this.state.loaded} />
-        volume: <input
-          type='range' min={0} max={1} step='any'
-          value={this.state.volume}
-          onChange={this.setVolume}
-        />
-        <hr />
-        <textarea ref='config' placeholder='Config JSON' style={{width: '200px', height: '200px'}}></textarea>
-        <button onClick={this.onConfigSubmit}>Update Config</button>
+      <div className='app'>
+        <section className='section'>
+          <h1>ReactPlayer Demo</h1>
+          <ReactPlayer
+            ref='player'
+            className='react-player'
+            width={480}
+            height={270}
+            url={this.state.url}
+            playing={this.state.playing}
+            volume={this.state.volume}
+            soundcloudConfig={this.state.soundcloudConfig}
+            vimeoConfig={this.state.vimeoConfig}
+            youtubeConfig={this.state.youtubeConfig}
+            onPlay={() => this.setState({ playing: true })}
+            onPause={() => this.setState({ playing: false })}
+            onBuffer={() => console.log('onBuffer')}
+            onEnded={() => this.setState({ playing: false })}
+            onProgress={this.onProgress}
+          />
+
+          <table><tbody>
+            <tr>
+              <th>Controls</th>
+              <td>
+                <button onClick={this.stop}>Stop</button>
+                <button onClick={this.playPause}>{this.state.playing ? 'Pause' : 'Play'}</button>
+              </td>
+            </tr>
+            <tr>
+              <th>Seek</th>
+              <td>
+                <input
+                  type='range' min={0} max={1} step='any'
+                  value={this.state.played}
+                  onMouseDown={this.onSeekMouseDown}
+                  onChange={this.onSeekChange}
+                  onMouseUp={this.onSeekMouseUp}
+                />
+              </td>
+            </tr>
+            <tr>
+              <th>Volume</th>
+              <td>
+                <input type='range' min={0} max={1} step='any' value={this.state.volume} onChange={this.setVolume} />
+              </td>
+            </tr>
+            <tr>
+              <th>Played</th>
+              <td><progress max={1} value={this.state.played} /></td>
+            </tr>
+            <tr>
+              <th>Loaded</th>
+              <td><progress max={1} value={this.state.loaded} /></td>
+            </tr>
+          </tbody></table>
+        </section>
+        <section className='section'>
+          <table><tbody>
+            <tr>
+              <th>YouTube</th>
+              <td>
+                { this.renderLoadButton('https://www.youtube.com/watch?v=oUFJJNQGwhk', 'Test A') }
+                { this.renderLoadButton('https://www.youtube.com/watch?v=jNgP6d9HraI', 'Test B') }
+              </td>
+            </tr>
+            <tr>
+              <th>SoundCloud</th>
+              <td>
+                { this.renderLoadButton('https://soundcloud.com/miami-nights-1984/accelerated', 'Test A') }
+                { this.renderLoadButton('https://soundcloud.com/bonobo/flashlight', 'Test B') }
+              </td>
+            </tr>
+            <tr>
+              <th>Vimeo</th>
+              <td>
+                { this.renderLoadButton('https://vimeo.com/90509568', 'Test A') }
+                { this.renderLoadButton('https://vimeo.com/94502406', 'Test B') }
+              </td>
+            </tr>
+            <tr>
+              <th>Files</th>
+              <td>
+                { this.renderLoadButton('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', 'MP4') }
+                { this.renderLoadButton('http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv', 'OGV') }
+                { this.renderLoadButton('http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm', 'WEBM') }
+              </td>
+            </tr>
+            <tr>
+              <th>Custom URL</th>
+              <td>
+                <input ref='url' type='text' placeholder='Enter URL' />
+                <button onClick={() => this.setState({ url: this.refs.url.value })}>Load</button>
+              </td>
+            </tr>
+            <tr>
+              <th>Custom config</th>
+              <td>
+                <textarea ref='config' placeholder='Enter JSON'></textarea>
+                <button onClick={this.onConfigSubmit}>Update Config</button>
+              </td>
+            </tr>
+          </tbody></table>
+
+          <h2>State</h2>
+
+          <table><tbody>
+            <tr>
+              <th>url</th>
+              <td className={ !this.state.url ? 'faded' : '' }>{ this.state.url || 'null' }</td>
+            </tr>
+            <tr>
+              <th>playing</th>
+              <td>{ this.state.playing ? 'true' : 'false' }</td>
+            </tr>
+            <tr>
+              <th>volume</th>
+              <td>{ this.state.volume.toFixed(3) }</td>
+            </tr>
+            <tr>
+              <th>played</th>
+              <td>{ this.state.played.toFixed(3) }</td>
+            </tr>
+            <tr>
+              <th>loaded</th>
+              <td>{ this.state.loaded.toFixed(3) }</td>
+            </tr>
+          </tbody></table>
+        </section>
       </div>
     )
   }

src/demo/App.scss

@@ -0,0 +1,32 @@
+$black: #000;
+$column-width: 480px;
+$gutter-width: 10px;
+// $break: $column-width * 2 + $gutter-width * 3;
+
+.app {
+  margin: auto;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 300;
+  text-align: center;
+
+  @media screen and ($column-width * 2) {
+
+  }
+}
+
+.section {
+  display: inline-block;
+  max-width: $column-width;
+  margin: $gutter-width;
+  text-align: left;
+  vertical-align: top;
+}
+
+.react-player {
+  margin-bottom: 10px;
+  background: rgba($black, .1);
+}
+
+.faded {
+  color: rgba($black, .5);
+}

src/demo/Range.scss

@@ -0,0 +1,123 @@
+// Styling Cross-Browser Compatible Range Inputs with Sass
+// Github: https://github.com/darlanrod/input-range-sass
+// Author: Darlan Rod https://github.com/darlanrod
+// Version 1.0.1
+// MIT License
+
+$track-color: #ccc;
+$thumb-color: #666;
+
+$thumb-radius: 10px;
+$thumb-height: 10px;
+$thumb-width: 10px;
+$thumb-shadow-size: 0;
+$thumb-shadow-blur: 0;
+$thumb-shadow-color: #111;
+$thumb-border-width: 0;
+$thumb-border-color: #fff;
+
+$track-width: 100%;
+$track-height: 5px;
+$track-shadow-size: 0;
+$track-shadow-blur: 0;
+$track-shadow-color: #222;
+$track-border-width: 0;
+$track-border-color: #000;
+
+$track-radius: 5px;
+$contrast: 5%;
+
+@mixin shadow($shadow-size, $shadow-blur, $shadow-color) {
+  box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color, 0 0 $shadow-size lighten($shadow-color, 5%);
+}
+
+@mixin track() {
+  width: $track-width;
+  height: $track-height;
+  cursor: pointer;
+}
+
+@mixin thumb() {
+  @include shadow($thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color);
+  border: $thumb-border-width solid $thumb-border-color;
+  height: $thumb-height;
+  width: $thumb-width;
+  border-radius: $thumb-radius;
+  background: $thumb-color;
+  cursor: pointer;
+  z-index: 100;
+}
+
+[type=range] {
+  -webkit-appearance: none;
+  margin: $thumb-height / 2 0;
+  width: $track-width;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::-webkit-slider-runnable-track {
+    @include track();
+    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
+    background: $track-color;
+    border: $track-border-width solid $track-border-color;
+    border-radius: $track-radius;
+  }
+
+  &::-webkit-slider-thumb {
+    @include thumb();
+    -webkit-appearance: none;
+    margin-top: ((-$track-border-width * 2 + $track-height) / 2) - ($thumb-height / 2);
+  }
+
+  &:focus::-webkit-slider-runnable-track {
+    background: lighten($track-color, $contrast);
+  }
+
+  &::-moz-range-track {
+    @include track();
+    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
+    background: $track-color;
+    border: $track-border-width solid $track-border-color;
+    border-radius: $track-radius;
+  }
+
+  &::-moz-range-thumb {
+    @include thumb();
+  }
+
+  &::-ms-track {
+    @include track();
+    background: transparent;
+    border-color: transparent;
+    border-width: $thumb-width 0;
+    color: transparent;
+  }
+
+  &::-ms-fill-lower {
+    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
+    background: darken($track-color, $contrast);
+    border: $track-border-width solid $track-border-color;
+    border-radius: $track-radius * 2;
+  }
+
+  &::-ms-fill-upper {
+    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
+    background: $track-color;
+    border: $track-border-width solid $track-border-color;
+    border-radius: $track-radius * 2;
+  }
+
+  &::-ms-thumb {
+    @include thumb();
+  }
+
+  &:focus::-ms-fill-lower {
+    background: $track-color;
+  }
+
+  &:focus::-ms-fill-upper {
+    background: lighten($track-color, $contrast);
+  }
+}