ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 18:35:09 +01:00
Code Issues Releases Wiki Activity

Adjust MediaContainer and MediaPlayer to newly introduced manual-thumbnail functionality

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-11-11 10:51:45 +01:00
parent ea321a4a77
commit 66aef4886f
2 changed files with 52 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/components/ascribe_detail/media_container.js
View File

@ -92,7 +92,7 @@ let MediaContainer = React.createClass({
aclObject={this.props.content.acl}
aclName="acl_download">
<Button bsSize="xsmall" className="ascribe-margin-1px" href={this.props.content.digital_work.url} target="_blank">
Download <Glyphicon glyph="cloud-download"/>
Download .{mimetype} <Glyphicon glyph="cloud-download"/>
</Button>
</AclProxy>
{embed}

68
js/components/ascribe_media/media_player.js
View File

@ -50,25 +50,35 @@ let Other = React.createClass({
let Image = React.createClass({
propTypes: {
url: React.PropTypes.string.isRequired,
url: React.PropTypes.string,
preview: React.PropTypes.string.isRequired
},
mixins: [InjectInHeadMixin],
componentDidMount() {
this.inject('https://code.jquery.com/jquery-2.1.4.min.js')
.then(() =>
Q.all([
this.inject(AppConstants.baseUrl + 'static/thirdparty/shmui/shmui.css'),
this.inject(AppConstants.baseUrl + 'static/thirdparty/shmui/jquery.shmui.js')
]).then(() => { window.jQuery('.shmui-ascribe').shmui(); }));
if(this.props.url) {
this.inject('https://code.jquery.com/jquery-2.1.4.min.js')
.then(() =>
Q.all([
this.inject(AppConstants.baseUrl + 'static/thirdparty/shmui/shmui.css'),
this.inject(AppConstants.baseUrl + 'static/thirdparty/shmui/jquery.shmui.js')
]).then(() => { window.jQuery('.shmui-ascribe').shmui(); }));
}
},
render() {
return (
<img className="shmui-ascribe" src={this.props.preview} data-large-src={this.props.url}/>
);
const { url, preview } = this.props;
if(url) {
return (
<img className="shmui-ascribe" src={preview} data-large-src={url}/>
);
} else {
return (
<img src={preview}/>
);
}
}
});
@ -202,26 +212,50 @@ let MediaPlayer = React.createClass({
},
render() {
if (this.props.mimetype === 'video' && this.props.encodingStatus !== undefined && this.props.encodingStatus !== 100) {
const { mimetype,
preview,
url,
extraData,
encodingStatus } = this.props;
if (mimetype === 'video' && encodingStatus !== undefined && encodingStatus !== 100) {
return (
<div className="ascribe-detail-header ascribe-media-player">
<p>
<em>We successfully received your video and it is now being encoded.
<br />You can leave this page and check back on the status later.</em>
</p>
<ProgressBar now={this.props.encodingStatus}
<ProgressBar now={encodingStatus}
label="%(percent)s%"
className="ascribe-progress-bar" />
</div>
);
} else {
let Component = resourceMap[this.props.mimetype] || Other;
let Component = resourceMap[mimetype] || Other;
let componentProps = {
preview,
url,
extraData,
encodingStatus
};
// Since the launch of the portfolio whitelabel submission,
// we allow the user to specify a thumbnail upon piece-registration.
// As the `Component` is chosen according to its filetype but could potentially
// have a manually submitted thumbnail, we match if the to `Mediaplayer` submitted thumbnail
// is not the generally used fallback `url` (ascribe_spiral.png).
//
// If this is the case, we disable shmui by deleting the original `url` prop and replace
// the assigned component to `Image`.
if(!decodeURIComponent(preview).match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/) &&
Component === Other) {
Component = resourceMap.image;
delete componentProps.url;
}
return (
<div className="ascribe-media-player">
<Component preview={this.props.preview}
url={this.props.url}
extraData={this.props.extraData}
encodingStatus={this.props.encodingStatus} />
<Component {...componentProps}/>
</div>
);
}