mirror of
https://github.com/ascribe/onion.git
synced 2025-02-14 21:10:27 +01:00
embed
This commit is contained in:
diminator
parent
ecef14b4df
commit
9d30b9e3b2
@ -70,8 +70,10 @@ let RequestActionForm = React.createClass({
|
||||
}
|
||||
return (
|
||||
<Alert bsStyle='warning'>
|
||||
<span>{ edition.owner } requests you { edition.request_action } this edition. </span>
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<div>{ edition.owner } requests you { edition.request_action } this edition. </div>
|
||||
{buttons}
|
||||
</div>
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
@ -7,6 +7,7 @@ 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';
|
||||
@ -34,6 +35,7 @@ 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';
|
||||
|
||||
@ -64,41 +66,13 @@ let Edition = React.createClass({
|
||||
this.setState(state);
|
||||
},
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
let thumbnail = this.props.edition.thumbnail;
|
||||
let mimetype = this.props.edition.digital_work.mime;
|
||||
let extraData = null;
|
||||
|
||||
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>
|
||||
);
|
||||
|
||||
let hashOfArtwork = (
|
||||
<a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.hash_as_address}>{this.props.edition.hash_as_address}</a>
|
||||
);
|
||||
|
||||
let ownerAddress = (
|
||||
<a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.btc_owner_address_noprefix}>{this.props.edition.btc_owner_address_noprefix}</a>
|
||||
);
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Col md={6}>
|
||||
<MediaPlayer mimetype={mimetype}
|
||||
preview={thumbnail}
|
||||
url={this.props.edition.digital_work.url}
|
||||
extraData={extraData} />
|
||||
<p className="text-center">
|
||||
<Button bsSize="xsmall" href={this.props.edition.digital_work.url} target="_blank">
|
||||
Download <Glyphicon glyph="cloud-download" />
|
||||
</Button>
|
||||
</p>
|
||||
<MediaContainer
|
||||
edition={this.props.edition}/>
|
||||
</Col>
|
||||
<Col md={6} className="ascribe-edition-details">
|
||||
<EditionHeader edition={this.props.edition}/>
|
||||
@ -159,27 +133,8 @@ let Edition = React.createClass({
|
||||
|
||||
<CollapsibleParagraph
|
||||
title="SPOOL Details">
|
||||
<Form >
|
||||
<Property
|
||||
name='artwork_id'
|
||||
label="Artwork ID"
|
||||
editable={false}>
|
||||
<pre className="ascribe-pre">{bitcoinIdValue}</pre>
|
||||
</Property>
|
||||
<Property
|
||||
name='hash_of_artwork'
|
||||
label="Hash of Artwork, title, etc"
|
||||
editable={false}>
|
||||
<pre className="ascribe-pre">{hashOfArtwork}</pre>
|
||||
</Property>
|
||||
<Property
|
||||
name='owner_address'
|
||||
label="Owned by SPOOL address"
|
||||
editable={false}>
|
||||
<pre className="ascribe-pre">{ownerAddress}</pre>
|
||||
</Property>
|
||||
<hr />
|
||||
</Form>
|
||||
<SpoolDetails
|
||||
edition={this.props.edition} />
|
||||
</CollapsibleParagraph>
|
||||
</Col>
|
||||
</Row>
|
||||
@ -187,6 +142,88 @@ let Edition = React.createClass({
|
||||
}
|
||||
});
|
||||
|
||||
let MediaContainer = React.createClass({
|
||||
propTypes: {
|
||||
edition: React.PropTypes.object
|
||||
},
|
||||
|
||||
render() {
|
||||
let thumbnail = this.props.edition.thumbnail;
|
||||
let mimetype = this.props.edition.digital_work.mime;
|
||||
let embed = null;
|
||||
let extraData = null;
|
||||
|
||||
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 }; });
|
||||
}
|
||||
|
||||
if (['video', 'audio'].indexOf(mimetype) > -1){
|
||||
embed = (
|
||||
<CollapsibleButton
|
||||
button={
|
||||
<Button bsSize="xsmall" className="ascribe-margin-1px">
|
||||
Embed
|
||||
</Button>
|
||||
}
|
||||
panel={
|
||||
<pre className="ascribe-pre">
|
||||
{'<iframe width="560" height="315" src="http://embed.ascribe.io/edition/'
|
||||
+ this.props.edition.bitcoin_id + '" frameborder="0" allowfullscreen></iframe>'
|
||||
}
|
||||
</pre>
|
||||
}/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<MediaPlayer mimetype={mimetype}
|
||||
preview={thumbnail}
|
||||
url={this.props.edition.digital_work.url}
|
||||
extraData={extraData} />
|
||||
<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"/>
|
||||
</Button>
|
||||
{embed}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const CollapsibleButton = React.createClass({
|
||||
|
||||
propTypes: {
|
||||
button: React.PropTypes.object,
|
||||
children: React.PropTypes.oneOfType([
|
||||
React.PropTypes.object,
|
||||
React.PropTypes.array
|
||||
])
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return {expanded: false};
|
||||
},
|
||||
handleToggle(e){
|
||||
e.preventDefault();
|
||||
this.setState({expanded: !this.state.expanded});
|
||||
},
|
||||
render() {
|
||||
let isVisible = (this.state.expanded) ? '' : 'invisible';
|
||||
return (
|
||||
<span>
|
||||
<span onClick={this.handleToggle}>
|
||||
{this.props.button}
|
||||
</span>
|
||||
<div ref='panel' className={isVisible}>
|
||||
{this.props.panel}
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
let EditionHeader = React.createClass({
|
||||
propTypes: {
|
||||
edition: React.PropTypes.object
|
||||
@ -640,4 +677,47 @@ let CoaDetails = React.createClass({
|
||||
}
|
||||
});
|
||||
|
||||
let SpoolDetails = React.createClass({
|
||||
propTypes: {
|
||||
edition: React.PropTypes.object
|
||||
},
|
||||
|
||||
render() {
|
||||
let bitcoinIdValue = (
|
||||
<a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.bitcoin_id}>{this.props.edition.bitcoin_id}</a>
|
||||
);
|
||||
|
||||
let hashOfArtwork = (
|
||||
<a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.hash_as_address}>{this.props.edition.hash_as_address}</a>
|
||||
);
|
||||
|
||||
let ownerAddress = (
|
||||
<a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.btc_owner_address_noprefix}>{this.props.edition.btc_owner_address_noprefix}</a>
|
||||
);
|
||||
|
||||
return (
|
||||
<Form >
|
||||
<Property
|
||||
name='artwork_id'
|
||||
label="Artwork ID"
|
||||
editable={false}>
|
||||
<pre className="ascribe-pre">{bitcoinIdValue}</pre>
|
||||
</Property>
|
||||
<Property
|
||||
name='hash_of_artwork'
|
||||
label="Hash of Artwork, title, etc"
|
||||
editable={false}>
|
||||
<pre className="ascribe-pre">{hashOfArtwork}</pre>
|
||||
</Property>
|
||||
<Property
|
||||
name='owner_address'
|
||||
label="Owned by SPOOL address"
|
||||
editable={false}>
|
||||
<pre className="ascribe-pre">{ownerAddress}</pre>
|
||||
</Property>
|
||||
<hr />
|
||||
</Form>);
|
||||
|
||||
}
|
||||
});
|
||||
export default Edition;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user