mirror of
https://github.com/ascribe/onion.git
synced 2024-06-30 21:52:08 +02:00
Add progressbar for encoding
This commit is contained in:
parent
ecef14b4df
commit
1d6e3cd26c
|
@ -3,6 +3,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import InjectInHeadMixin from '../../mixins/inject_in_head_mixin';
|
import InjectInHeadMixin from '../../mixins/inject_in_head_mixin';
|
||||||
import Panel from 'react-bootstrap/lib/Panel';
|
import Panel from 'react-bootstrap/lib/Panel';
|
||||||
|
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
|
||||||
import AppConstants from '../../constants/application_constants.js';
|
import AppConstants from '../../constants/application_constants.js';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -72,7 +73,7 @@ let Audio = React.createClass({
|
||||||
|
|
||||||
ready() {
|
ready() {
|
||||||
window.audiojs.events.ready(function() {
|
window.audiojs.events.ready(function() {
|
||||||
var as = audiojs.createAll();
|
window.audiojs.createAll();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -87,7 +88,8 @@ let Video = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
preview: React.PropTypes.string.isRequired,
|
preview: React.PropTypes.string.isRequired,
|
||||||
url: 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],
|
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 = {
|
let resourceMap = {
|
||||||
'image': Image,
|
'image': Image,
|
||||||
'video': Video,
|
'video': Video,
|
||||||
|
@ -144,19 +164,30 @@ let MediaPlayer = React.createClass({
|
||||||
mimetype: React.PropTypes.oneOf(['image', 'video', 'audio', 'pdf', 'other']).isRequired,
|
mimetype: React.PropTypes.oneOf(['image', 'video', 'audio', 'pdf', 'other']).isRequired,
|
||||||
preview: React.PropTypes.string.isRequired,
|
preview: React.PropTypes.string.isRequired,
|
||||||
url: React.PropTypes.string.isRequired,
|
url: React.PropTypes.string.isRequired,
|
||||||
extraData: React.PropTypes.array
|
extraData: React.PropTypes.array,
|
||||||
|
encodingStatus: React.PropTypes.number
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -70,11 +70,13 @@ let Edition = React.createClass({
|
||||||
let thumbnail = this.props.edition.thumbnail;
|
let thumbnail = this.props.edition.thumbnail;
|
||||||
let mimetype = this.props.edition.digital_work.mime;
|
let mimetype = this.props.edition.digital_work.mime;
|
||||||
let extraData = null;
|
let extraData = null;
|
||||||
|
let encodingStatus = this.props.edition.digital_work.isEncoding;
|
||||||
|
|
||||||
if (this.props.edition.digital_work.encoding_urls) {
|
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 }; });
|
extraData = this.props.edition.digital_work.encoding_urls.map(e => { return { url: e.url, type: e.label }; });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
let bitcoinIdValue = (
|
let bitcoinIdValue = (
|
||||||
<a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.bitcoin_id}>{this.props.edition.bitcoin_id}</a>
|
<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}
|
<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">
|
<p className="text-center">
|
||||||
<Button bsSize="xsmall" href={this.props.edition.digital_work.url} target="_blank">
|
<Button bsSize="xsmall" href={this.props.edition.digital_work.url} target="_blank">
|
||||||
Download <Glyphicon glyph="cloud-download" />
|
Download <Glyphicon glyph="cloud-download" />
|
||||||
|
|
|
@ -17,6 +17,11 @@ let EditionContainer = React.createClass({
|
||||||
|
|
||||||
onChange(state) {
|
onChange(state) {
|
||||||
this.setState(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() {
|
componentDidMount() {
|
||||||
|
@ -30,7 +35,7 @@ let EditionContainer = React.createClass({
|
||||||
// as it will otherwise display wrong/old data once the user loads
|
// as it will otherwise display wrong/old data once the user loads
|
||||||
// the edition detail a second time
|
// the edition detail a second time
|
||||||
EditionActions.updateEdition({});
|
EditionActions.updateEdition({});
|
||||||
|
window.clearInterval(this.state.timerId);
|
||||||
EditionStore.unlisten(this.onChange);
|
EditionStore.unlisten(this.onChange);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user