Refactor and restyle

js/components/ascribe_media/media_player.js

@@ -15,7 +15,7 @@ import InjectInHeadMixin from '../../mixins/inject_in_head_mixin';
 
 let Image = React.createClass({
     render() {
-        return (<img className="img-responsive" src={this.props.preview} />);
+        return (<img src={this.props.preview} />);
     }
 });
 
@@ -64,7 +64,7 @@ let resourceMap = {
     'video': Video
 }
 
-let ResourceViewer = React.createClass({
+let MediaPlayer = React.createClass({
     propTypes: {
         mimetype: React.PropTypes.oneOf(['image', 'video', 'audio', 'pdf', 'other']).isRequired,
         preview: React.PropTypes.string.isRequired,
@@ -75,7 +75,7 @@ let ResourceViewer = React.createClass({
         let Component = resourceMap[this.props.mimetype] || Image;
 
         return (
-            <div className="media">
+            <div className="ascribe-media-player">
                 <Component preview={this.props.preview}
                            url={this.props.url}
                            extraData={this.props.extraData} />
@@ -84,4 +84,4 @@ let ResourceViewer = React.createClass({
     }
 });
 
-export default ResourceViewer;
+export default MediaPlayer;

js/components/edition.js

@@ -1,5 +1,10 @@
 import React from 'react';
-import ResourceViewer from './ascribe_media/resource_viewer';
+import MediaPlayer from './ascribe_media/media_player';
+
+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 EditionActions from '../actions/edition_actions'
 import AclButton from './acl_button'
@@ -18,19 +23,23 @@ let Edition = React.createClass({
         }
 
         return (
-            <div>
-                <div className="col-md-7">
-                    <ResourceViewer mimetype={mimetype}
+            <Row>
+                <Col md={7}>
+                    <MediaPlayer mimetype={mimetype}
                                     preview={thumbnail}
                                     url={this.props.edition.digital_work.url}
                                     extraData={extraData} />
-                </div>
-                <div className="col-md-5">
+                    <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={5}>
                     <EditionHeader edition={this.props.edition}/>
                     <EditionDetails edition={this.props.edition} currentUser={ this.props.currentUser }/>
-                </div>
-
-            </div>
+                </Col>
+            </Row>
         );
     }
 });

sass/ascribe_media_player.scss

@@ -0,0 +1,13 @@
+.ascribe-media-player {
+    margin-bottom: 1em;
+    video {
+        width: 100%;
+        height: 100%;
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
+

sass/main.scss

@@ -9,6 +9,7 @@
 @import 'ascribe_accordion_list';
 @import 'ascribe_piece_list_bulk_modal';
 @import 'ascribe_piece_list_toolbar';
+@import 'ascribe_media_player';
 @import 'offset_right';
 
 .hidden {