add acl proxy component

js/components/acl_proxy.js

@@ -0,0 +1,31 @@
+'use strict';
+
+import React from 'react';
+
+let AclProxy = React.createClass({
+    propTypes: {
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ]).isRequired,
+        aclObject: React.PropTypes.object.isRequired,
+        aclName: React.PropTypes.string.isRequired
+    },
+
+    render() {
+        if(this.props.aclObject[this.props.aclName]) {
+            return (
+                <div>
+                    {this.props.children}
+                </div>
+            );
+        } else {
+            if(typeof this.props.aclObject[this.props.aclName] === 'undefined') {
+                console.warn('The aclName you\'re filtering for was not present (undefined) in the aclObject.');
+            }
+            return null;
+        }
+    }
+});
+
+export default AclProxy;

js/components/ascribe_detail/media_container.js

@@ -9,6 +9,8 @@ import MediaPlayer from './../ascribe_media/media_player';
 
 import CollapsibleButton from './../ascribe_collapsible/collapsible_button';
 
+import AclProxy from '../acl_proxy';
+
 
 let MediaContainer = React.createClass({
     propTypes: {
@@ -49,9 +51,13 @@ let MediaContainer = React.createClass({
                                         url={this.props.content.digital_work.url}
                                         extraData={extraData} />
                 <p className="text-center">
+                    <AclProxy
+                        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"/>
                         </Button>
+                    </AclProxy>
                     {embed}
                 </p>
             </div>