Merge remote-tracking branch 'remotes/origin/AD-506-add-audio-player'

js/components/ascribe_media/media_player.js

@@ -59,6 +59,30 @@ let Image = React.createClass({
     }
 });
 
+let Audio = React.createClass({
+    propTypes: {
+        url: React.PropTypes.string.isRequired
+    },
+
+    mixins: [InjectInHeadMixin],
+
+    componentDidMount() {
+        this.inject(AppConstants.baseUrl + 'static/thirdparty/audiojs/audiojs/audio.min.js').then(this.ready);
+    },
+
+    ready() {
+        window.audiojs.events.ready(function() {
+            var as = audiojs.createAll();
+        });
+    },
+
+    render() {
+        return (
+            <audio className="ascribe-audio" src={this.props.url} preload="auto" />
+        );
+    }
+});
+
 let Video = React.createClass({
     propTypes: {
         preview: React.PropTypes.string.isRequired,
@@ -73,22 +97,27 @@ let Video = React.createClass({
     },
 
     componentDidMount() {
-        this.inject('https://code.jquery.com/jquery-2.1.4.min.js')
-            .then(() =>
         Promise.all([
-                    this.inject('https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.17.0/mediaelement-and-player.min.js'),
-                    this.inject('https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.17.0/mediaelementplayer.min.css')
-                ]).then(this.ready));
+            this.inject('//vjs.zencdn.net/4.12/video-js.css'),
+            this.inject('//vjs.zencdn.net/4.12/video.js')
+        ]).then(this.ready);
+    },
+
+    componentDidUpdate() {
+        if (this.state.ready && !this.state.videojs) {
+            window.videojs(React.findDOMNode(this.refs.video));
+        }
     },
 
     ready() {
-        this.setState({ready: true});
+        this.setState({ready: true, videojs: false});
     },
 
     render() {
         if (this.state.ready) {
             return (
-                <video poster={this.props.preview} controls="controls" preload="none">
+                <video ref="video" className="video-js vjs-default-skin" poster={this.props.preview}
+                       controls preload="none" width="auto" height="auto">
                     {this.props.extraData.map((data, i) =>
                     <source key={i} type={'video/' + data.type} src={data.url} />
                     )}
@@ -106,6 +135,7 @@ let Video = React.createClass({
 let resourceMap = {
     'image': Image,
     'video': Video,
+    'audio': Audio,
     'other': Other
 };
 

package.json

@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "alt": "^0.16.5",
+    "audiojs": "vrde/audiojs",
     "babelify": "^6.1.2",
     "bootstrap-sass": "^3.3.4",
     "browser-sync": "^2.7.5",
@@ -72,6 +73,7 @@
     "react-datepicker": "~0.8.0",
     "react-progressbar": "^1.1.0",
     "react-router": "^0.13.3",
+    "react-router-bootstrap": "~0.16.0",
     "react-textarea-autosize": "^2.2.3",
     "reactify": "^1.1.0",
     "shmui": "^0.1.0",
@@ -79,8 +81,7 @@
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
     "watchify": "^3.1.2",
-    "yargs": "^3.10.0",
-    "react-router-bootstrap": "~0.16.0"
+    "yargs": "^3.10.0"
   },
   "jest": {
     "scriptPreprocessor": "node_modules/babel-jest",

sass/ascribe_media_player.scss

@@ -14,5 +14,96 @@
         font-size: 500%;
         color: #cccccc;
     }
+
+    .audiojs {
+        margin: 50px auto;
+        background-image: none;
+    }
+
+    .audiojs * {
+        box-sizing: content-box;
+    }
+
+    .audiojs .loaded {
+        background-color: $ascribe-color-full;
+        background-image: none;
+    }
+    .audiojs .progress {
+        background-color: rgba(255,255,255,0.8);
+        background-image: none;
+    }
+
+    .video-js,
+    .vjs-poster {
+        background-color: transparent;
+    }
+
+    .video-js .vjs-tech {
+        position: relative;
+    }
+
+    .vjs-fullscreen {
+        padding-top: 0px;
+    }
+
+    .vjs-default-skin .vjs-play-progress,
+    .vjs-default-skin .vjs-volume-level {
+        background: $ascribe-color-full;
+    }
+
+    .vjs-default-skin .vjs-big-play-button {
+        border-radius: 6px;
+        -o-border-radius: 6px;
+        -moz-border-radius: 6px;
+        -webkit-border-radius: 6px;
+
+        box-shadow: none;
+        -o-box-shadow: none;
+        -moz-box-shadow: none;
+        -webkit-box-shadow: none;
+
+        width: 100px;
+        height: 60px;
+        top: 50%;
+        left: 50%;
+        margin: -30px -50px;
+
+        border: none;
+
+        background-color: rgba(0,0,0,.8);
+    }
+
+    .vjs-default-skin:hover .vjs-big-play-button,
+    .vjs-default-skin .vjs-big-play-button:focus {
+        border-color: #fff;
+        background-color: rgba(0,0,0,.9);
+
+        box-shadow: none;
+        -o-box-shadow: none;
+        -moz-box-shadow: none;
+        -webkit-box-shadow: none;
+
+        transition: all 0s;
+        -o-transition: all 0s;
+        -moz-transition: all 0s;
+        -webkit-transition: all 0s;
+    }
+
+    .vjs-default-skin .vjs-big-play-button:before {
+        line-height: 60px;
+    }
+
+    .vjs-default-skin .vjs-slider-handle:before,
+    .vjs-default-skin .vjs-big-play-button:before {
+        text-shadow: none;
+    }
+
+    .vjs-default-skin .vjs-volume-bar {
+        height: .5em;
+    }
+
+    .vjs-default-skin .vjs-control-bar {
+        background-color: rgba(0,0,0,.7);
+    }
 }