mirror of
https://github.com/ascribe/onion.git
synced 2024-12-23 09:50:31 +01:00
339421a4b7
Conflicts: js/components/ascribe_detail/media_container.js js/components/ascribe_media/media_player.js
140 lines
5.1 KiB
JavaScript
140 lines
5.1 KiB
JavaScript
'use strict';
|
|
|
|
import React from 'react';
|
|
|
|
import Button from 'react-bootstrap/lib/Button';
|
|
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
|
|
|
|
import MediaPlayer from './../ascribe_media/media_player';
|
|
|
|
import FacebookShareButton from '../ascribe_social_share/facebook_share_button';
|
|
import TwitterShareButton from '../ascribe_social_share/twitter_share_button';
|
|
|
|
import CollapsibleButton from './../ascribe_collapsible/collapsible_button';
|
|
|
|
import AclProxy from '../acl_proxy';
|
|
|
|
import UserActions from '../../actions/user_actions';
|
|
import UserStore from '../../stores/user_store';
|
|
|
|
import { mergeOptions } from '../../utils/general_utils.js';
|
|
import { getLangText } from '../../utils/lang_utils.js';
|
|
|
|
const EMBED_IFRAME_HEIGHT = {
|
|
video: 315,
|
|
audio: 62
|
|
};
|
|
|
|
let MediaContainer = React.createClass({
|
|
propTypes: {
|
|
content: React.PropTypes.object,
|
|
refreshObject: React.PropTypes.func
|
|
},
|
|
|
|
getInitialState() {
|
|
return mergeOptions(
|
|
UserStore.getState(),
|
|
{
|
|
timerId: null
|
|
});
|
|
},
|
|
|
|
componentDidMount() {
|
|
UserStore.listen(this.onChange);
|
|
UserActions.fetchCurrentUser();
|
|
|
|
if (!this.props.content.digital_work) {
|
|
return;
|
|
}
|
|
let isEncoding = this.props.content.digital_work.isEncoding;
|
|
if (this.props.content.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
|
|
let timerId = window.setInterval(this.props.refreshObject, 10000);
|
|
this.setState({timerId: timerId});
|
|
}
|
|
},
|
|
|
|
componentWillUpdate() {
|
|
if (this.props.content.digital_work.isEncoding === 100) {
|
|
window.clearInterval(this.state.timerId);
|
|
}
|
|
},
|
|
|
|
componentWillUnmount() {
|
|
UserStore.unlisten(this.onChange);
|
|
|
|
window.clearInterval(this.state.timerId);
|
|
},
|
|
|
|
onChange(state) {
|
|
this.setState(state);
|
|
},
|
|
|
|
render() {
|
|
const { content } = this.props;
|
|
// Pieces and editions are joined to the user by a foreign key in the database, so
|
|
// the information in content will be updated if a user updates their username.
|
|
// We also force uniqueness of usernames, so this check is safe to dtermine if the
|
|
// content was registered by the current user.
|
|
const didUserRegisterContent = this.state.currentUser && (this.state.currentUser.username === content.user_registered);
|
|
|
|
let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ?
|
|
content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe;
|
|
let mimetype = content.digital_work.mime;
|
|
let embed = null;
|
|
let extraData = null;
|
|
let isEmbedDisabled = mimetype === 'video' && content.digital_work.isEncoding !== undefined && content.digital_work.isEncoding !== 100;
|
|
|
|
if (content.digital_work.encoding_urls) {
|
|
extraData = content.digital_work.encoding_urls.map(e => { return { url: e.url, type: e.label }; });
|
|
}
|
|
|
|
if (['video', 'audio'].indexOf(mimetype) > -1) {
|
|
let height = EMBED_IFRAME_HEIGHT[mimetype];
|
|
|
|
embed = (
|
|
<CollapsibleButton
|
|
button={
|
|
<Button bsSize="xsmall" className="ascribe-margin-1px" disabled={isEmbedDisabled ? '"disabled"' : ''}>
|
|
Embed
|
|
</Button>
|
|
}
|
|
panel={
|
|
<pre className="">
|
|
{'<iframe width="560" height="' + height + '" src="https://embed.ascribe.io/content/'
|
|
+ content.bitcoin_id + '" frameborder="0" allowfullscreen></iframe>'}
|
|
</pre>
|
|
}/>
|
|
);
|
|
}
|
|
return (
|
|
<div>
|
|
<MediaPlayer
|
|
mimetype={mimetype}
|
|
preview={thumbnail}
|
|
url={content.digital_work.url}
|
|
extraData={extraData}
|
|
encodingStatus={content.digital_work.isEncoding} />
|
|
<p className="text-center">
|
|
<span className="ascribe-social-button-list">
|
|
<FacebookShareButton />
|
|
<TwitterShareButton
|
|
text={getLangText('Check out %s ascribed piece', didUserRegisterContent ? 'my latest' : 'this' )} />
|
|
</span>
|
|
|
|
<AclProxy
|
|
show={['video', 'audio', 'image'].indexOf(mimetype) === -1 || content.acl.acl_download}
|
|
aclObject={content.acl}
|
|
aclName="acl_download">
|
|
<Button bsSize="xsmall" className="ascribe-margin-1px" href={this.props.content.digital_work.url} target="_blank">
|
|
Download .{mimetype} <Glyphicon glyph="cloud-download"/>
|
|
</Button>
|
|
</AclProxy>
|
|
{embed}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
export default MediaContainer;
|