Add support for videos and images

js/actions/piece_list_actions.js

@@ -14,7 +14,6 @@ class PieceListActions {
         PieceListFetcher
             .fetch(page, pageSize, search, orderBy, orderAsc)
             .then((res) => {
-                console.log(res);
                 this.actions.updatePieceList({
                     page,
                     pageSize,

js/components/ascribe_media/resource_viewer.js

@@ -12,26 +12,73 @@ import InjectInHeadMixin from '../../mixins/inject_in_head_mixin';
  *  - other
  */
 
-let resourceMap = {
-    'image': 1
-}
 
-let ResourceViewer = React.createClass({
+let Image = React.createClass({
+    render() {
+        return (<img className="img-responsive" src={this.props.preview} />);
+    }
+});
+
+let Video = React.createClass({
     propTypes: {
-        thumbnail: React.PropTypes.string.isRequired,
-        mimetype: React.PropTypes.oneOf(['image', 'video', 'audio', 'pdf', 'other']).isRequired
+        preview: React.PropTypes.string.isRequired,
+        url: React.PropTypes.string.isRequired,
+        extraData: React.PropTypes.array.isRequired
     },
 
     mixins: [InjectInHeadMixin],
 
+    getInitialState() {
+        return { ready: false };
+    },
+
     componentDidMount() {
-        this.inject('http://antani.com');
+        this.inject('http://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.setState({ready: true}); }));
     },
 
     render() {
+        if (this.state.ready) {
+            return (
+                <video poster={this.props.preview} controls="controls" preload="none">
+                    {this.props.extraData.map((data, i) =>
+                    <source key={i} type={'video/' + data.type} src={data.url} />
+                    )}
+                </video>
+            );
+        } else {
+            return(
+                <Image src={this.props.preview} />
+            );
+        }
+    }
+});
+
+
+let resourceMap = {
+    'image': Image,
+    'video': Video
+}
+
+let ResourceViewer = React.createClass({
+    propTypes: {
+        mimetype: React.PropTypes.oneOf(['image', 'video', 'audio', 'pdf', 'other']).isRequired,
+        preview: React.PropTypes.string.isRequired,
+        url: React.PropTypes.string.isRequired
+    },
+
+    render() {
+        let Component = resourceMap[this.props.mimetype] || Image;
+
         return (
-            <div>
-                resourceviewer {this.props.thumbnail} {this.props.mimetype}
+            <div className="media">
+                <Component preview={this.props.preview}
+                           url={this.props.url}
+                           extraData={this.props.extraData} />
             </div>
         );
     }

js/components/edition.js

@@ -10,13 +10,19 @@ let Edition = React.createClass({
     render() {
         let thumbnail = this.props.edition.thumbnail;
         let mimetype = this.props.edition.digital_work.mime;
+        let extraData = null;
+
+        if (this.props.edition.digital_work.encoding_urls) {
+            extraData = this.props.edition.digital_work.encoding_urls.map(e => { return { url: e.url, type: e.label } });
+        }
 
         return (
             <div>
                 <div className="col-md-7">
-                    <ResourceViewer thumbnail={thumbnail}
-                                    mimetype={mimetype}
-                                    />
+                    <ResourceViewer mimetype={mimetype}
+                                    preview={thumbnail}
+                                    url={this.props.edition.digital_work.url}
+                                    extraData={extraData} />
                 </div>
                 <div className="col-md-5">
                     <EditionHeader edition={this.props.edition}/>

js/components/edition_container.js

@@ -37,7 +37,8 @@ let EditionContainer = React.createClass({
 
         if('title' in this.state.edition) {
             return (
-                <Edition edition={this.state.edition } currentUser={this.state.currentUser}></Edition>
+                <Edition edition={this.state.edition}
+                         currentUser={this.state.currentUser} />
             );
         } else {
             return (

js/mixins/inject_in_head_mixin.js

@@ -1,10 +1,10 @@
 let mapAttr = {
     link: 'href',
-    source: 'src'
+    script: 'src'
 }
 
-let mapExt = {
-    js: 'source',
+let mapTag = {
+    js: 'script',
     css: 'link'
 }
 
@@ -23,33 +23,41 @@ let InjectInHeadMixin = {
     },
 
     injectTag(tag, src){
-        console.log(this.foobar);
-        if (InjectInHeadMixin.isPresent(tag, src))
-            return;
+        let promise = new Promise((resolve, reject) => {
+            if (InjectInHeadMixin.isPresent(tag, src)) {
+                resolve();
+            } else {
+                let attr = mapAttr[tag];
+                let element = document.createElement(tag);
+                if (tag == 'script') {
+                    element.onload = () => resolve();
+                    element.onerror = () => reject();
+                } else {
+                    resolve();
+                }
+                document.head.appendChild(element);
+                element[attr] = src;
+            }
+        });
 
-        let attr = mapAttr[tag];
-        let element = document.createElement(tag);
-        document.head.appendChild(element);
-        element[attr] = src;
+        return promise;
     },
 
     injectStylesheet(src) {
-        this.injectTag('link', src);
+        return InjectInHeadMixin.injectTag('link', src);
     },
 
     injectScript(src) {
-        this.injectTag('source', src);
+        return InjectInHeadMixin.injectTag('source', src);
     },
 
     inject(src) {
         let ext = src.split('.').pop();
-        let tag = null;
-        try {
-            tag = mapAttr(src);
-        } catch (e) {
+        let tag = mapTag[ext];
+        if (!tag)
             throw new Error(`Cannot inject ${src} in the DOM, cannot guess the tag name from extension "${ext}". Valid extensions are "js" and "css".`);
-        }
-        InjectInHeadMixin.injectTag(tag, src);
+
+        return InjectInHeadMixin.injectTag(tag, src);
     }
 
 };