embed

js/components/ascribe_forms/form_request_action.js

@@ -70,8 +70,10 @@ let RequestActionForm = React.createClass({
         }
         return (
             <Alert bsStyle='warning'>
-                <span>{ edition.owner } requests you { edition.request_action } this edition.&nbsp;&nbsp;</span>
+                <div style={{textAlign: 'center'}}>
+                <div>{ edition.owner } requests you { edition.request_action } this edition.&nbsp;&nbsp;</div>
                 {buttons}
+                </div>
             </Alert>
         );
     }

js/components/edition.js

@@ -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}
+                    <MediaContainer
-                                    preview={thumbnail}
+                        edition={this.props.edition}/>
-                                    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>
                 </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 >
+                        <SpoolDetails
-                            <Property
+                            edition={this.props.edition} />
-                                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>
                     </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;