Merge branch 'AD-438-progressbar-encoding'

Conflicts:
	js/components/edition.js

js/components/ascribe_media/media_player.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import InjectInHeadMixin from '../../mixins/inject_in_head_mixin';
 import Panel from 'react-bootstrap/lib/Panel';
+import ProgressBar from 'react-bootstrap/lib/ProgressBar';
 import AppConstants from '../../constants/application_constants.js';
 
 /**
@@ -72,7 +73,7 @@ let Audio = React.createClass({
 
     ready() {
         window.audiojs.events.ready(function() {
-            var as = audiojs.createAll();
+            window.audiojs.createAll();
         });
     },
 
@@ -87,7 +88,8 @@ let Video = React.createClass({
     propTypes: {
         preview: React.PropTypes.string.isRequired,
         url: React.PropTypes.string.isRequired,
-        extraData: React.PropTypes.array.isRequired
+        extraData: React.PropTypes.array.isRequired,
+        encodingStatus: React.PropTypes.number
     },
 
     mixins: [InjectInHeadMixin],
@@ -132,6 +134,24 @@ let Video = React.createClass({
 });
 
 
+let EncodingStatus = React.createClass({
+    propTypes: {
+        encodingStatus: React.PropTypes.number.isRequired
+    },
+
+    render() {
+        return (
+            <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} />
+                )}
+            </video>
+        );
+    }
+});
+
+
 let resourceMap = {
     'image': Image,
     'video': Video,
@@ -144,19 +164,30 @@ let MediaPlayer = React.createClass({
         mimetype: React.PropTypes.oneOf(['image', 'video', 'audio', 'pdf', 'other']).isRequired,
         preview: React.PropTypes.string.isRequired,
         url: React.PropTypes.string.isRequired,
-        extraData: React.PropTypes.array
+        extraData: React.PropTypes.array,
+        encodingStatus: React.PropTypes.number
     },
 
     render() {
-        let Component = resourceMap[this.props.mimetype] || Other;
+        if (this.props.encodingStatus !== undefined && this.props.encodingStatus !== 100) {
-
+            return (
-        return (
+                <div className="ascribe-detail-header ascribe-media-player">
-            <div className="ascribe-media-player">
+                    <p><em>Please be patient, the video is been encoded</em></p>
-                <Component preview={this.props.preview}
+                    <ProgressBar now={this.props.encodingStatus}
-                           url={this.props.url}
+                        label='%(percent)s%' />
-                           extraData={this.props.extraData} />
+                </div>
-            </div>
+            );
-        );
+        } else {
+            let Component = resourceMap[this.props.mimetype] || Other;
+            return (
+                <div className="ascribe-media-player">
+                    <Component preview={this.props.preview}
+                               url={this.props.url}
+                               extraData={this.props.extraData}
+                               encodingStatus={this.props.encodingStatus} />
+                </div>
+            );
+        }
     }
 });
 

js/components/edition.js

@@ -7,7 +7,6 @@ import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 import Button from 'react-bootstrap/lib/Button';
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
-import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin';
 
 import UserActions from '../actions/user_actions';
 import UserStore from '../stores/user_store';
@@ -35,7 +34,6 @@ import GlobalNotificationActions from '../actions/global_notification_actions';
 
 import apiUrls from '../constants/api_urls';
 import AppConstants from '../constants/application_constants';
-import classNames from 'classnames';
 
 import { getCookie } from '../utils/fetch_api_utils';
 
@@ -67,12 +65,10 @@ let Edition = React.createClass({
     },
 
     render() {
-
         return (
             <Row>
                 <Col md={6}>
-                    <MediaContainer
+                    <MediaContainer edition={this.props.edition}/>
-                        edition={this.props.edition}/>
                 </Col>
                 <Col md={6} className="ascribe-edition-details">
                     <EditionHeader edition={this.props.edition}/>
@@ -152,6 +148,7 @@ let MediaContainer = React.createClass({
         let mimetype = this.props.edition.digital_work.mime;
         let embed = null;
         let extraData = null;
+        let encodingStatus = this.props.edition.digital_work.isEncoding;
 
         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 }; });
@@ -177,9 +174,10 @@ let MediaContainer = React.createClass({
         return (
             <div>
                 <MediaPlayer mimetype={mimetype}
-                                        preview={thumbnail}
+                    preview={thumbnail}
-                                        url={this.props.edition.digital_work.url}
+                    url={this.props.edition.digital_work.url}
-                                        extraData={extraData} />
+                    extraData={extraData} 
+                    encodingStatus={encodingStatus} />
                 <p className="text-center">
                     <Button bsSize="xsmall" className="ascribe-margin-1px" href={this.props.edition.digital_work.url} target="_blank">
                         Download <Glyphicon glyph="cloud-download"/>

js/components/edition_container.js

@@ -17,6 +17,11 @@ let EditionContainer = React.createClass({
 
     onChange(state) {
         this.setState(state);
+        let isEncoding = state.edition.digital_work.isEncoding;
+        if (isEncoding !== undefined && isEncoding !== 100) {
+            let timerId = window.setInterval(() => EditionActions.fetchOne(this.props.params.editionId), 10000);
+            this.setState({timerId: timerId})
+        }
     },
 
     componentDidMount() {
@@ -30,7 +35,7 @@ let EditionContainer = React.createClass({
         // as it will otherwise display wrong/old data once the user loads
         // the edition detail a second time
         EditionActions.updateEdition({});
-        
+        window.clearInterval(this.state.timerId);
         EditionStore.unlisten(this.onChange);
     },