Add progressbar for encoding

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;
-
-        return (
-            <div className="ascribe-media-player">
-                <Component preview={this.props.preview}
-                           url={this.props.url}
-                           extraData={this.props.extraData} />
-            </div>
-        );
+        if (this.props.encodingStatus !== undefined && this.props.encodingStatus !== 100) {
+            return (
+                <div className="ascribe-detail-header ascribe-media-player">
+                    <p><em>Please be patient, the video is been encoded</em></p>
+                    <ProgressBar now={this.props.encodingStatus}
+                        label='%(percent)s%' />
+                </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

@@ -70,11 +70,13 @@ let Edition = React.createClass({
         let thumbnail = this.props.edition.thumbnail;
         let mimetype = this.props.edition.digital_work.mime;
         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 }; });
         }
 
+
         let bitcoinIdValue = (
             <a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.bitcoin_id}>{this.props.edition.bitcoin_id}</a>
         );
@@ -93,7 +95,8 @@ let Edition = React.createClass({
                     <MediaPlayer mimetype={mimetype}
                                     preview={thumbnail}
                                     url={this.props.edition.digital_work.url}
-                                    extraData={extraData} />
+                                    extraData={extraData}
+                                    encodingStatus={encodingStatus} />
                     <p className="text-center">
                         <Button bsSize="xsmall" 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);
     },