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,
@@ -111,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

@@ -15,6 +15,24 @@
         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;