Adjust MediaContainer and MediaPlayer to newly introduced manual-thumbnail functionality

js/components/ascribe_detail/media_container.js

@@ -92,7 +92,7 @@ let MediaContainer = React.createClass({
                         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"/>
+                            Download .{mimetype} <Glyphicon glyph="cloud-download"/>
                         </Button>
                     </AclProxy>
                     {embed}

js/components/ascribe_media/media_player.js

@@ -50,25 +50,35 @@ let Other = React.createClass({
 
 let Image = React.createClass({
     propTypes: {
-        url: React.PropTypes.string.isRequired,
+        url: React.PropTypes.string,
         preview: React.PropTypes.string.isRequired
     },
 
     mixins: [InjectInHeadMixin],
 
     componentDidMount() {
-        this.inject('https://code.jquery.com/jquery-2.1.4.min.js')
+        if(this.props.url) {
-            .then(() =>
+            this.inject('https://code.jquery.com/jquery-2.1.4.min.js')
-                Q.all([
+                .then(() =>
-                    this.inject(AppConstants.baseUrl + 'static/thirdparty/shmui/shmui.css'),
+                    Q.all([
-                    this.inject(AppConstants.baseUrl + 'static/thirdparty/shmui/jquery.shmui.js')
+                        this.inject(AppConstants.baseUrl + 'static/thirdparty/shmui/shmui.css'),
-                ]).then(() => { window.jQuery('.shmui-ascribe').shmui(); }));
+                        this.inject(AppConstants.baseUrl + 'static/thirdparty/shmui/jquery.shmui.js')
+                    ]).then(() => { window.jQuery('.shmui-ascribe').shmui(); }));
+        }
     },
 
     render() {
-        return (
+        const { url, preview } = this.props;
-            <img className="shmui-ascribe" src={this.props.preview} data-large-src={this.props.url}/>
+
-        );
+        if(url) {
+            return (
+                <img className="shmui-ascribe" src={preview} data-large-src={url}/>
+            );
+        } else {
+            return (
+                <img src={preview}/>
+            );
+        }
     }
 });
 
@@ -202,26 +212,50 @@ let MediaPlayer = React.createClass({
     },
 
     render() {
-        if (this.props.mimetype === 'video' && this.props.encodingStatus !== undefined && this.props.encodingStatus !== 100) {
+        const { mimetype,
+                preview,
+                url,
+                extraData,
+                encodingStatus } = this.props;
+
+        if (mimetype === 'video' && encodingStatus !== undefined && encodingStatus !== 100) {
             return (
                 <div className="ascribe-detail-header ascribe-media-player">
                     <p>
                         <em>We successfully received your video and it is now being encoded.
                         <br />You can leave this page and check back on the status later.</em>
                     </p>
-                    <ProgressBar now={this.props.encodingStatus}
+                    <ProgressBar now={encodingStatus}
                         label="%(percent)s%"
                         className="ascribe-progress-bar" />
                 </div>
             );
         } else {
-            let Component = resourceMap[this.props.mimetype] || Other;
+            let Component = resourceMap[mimetype] || Other;
+            let componentProps = {
+                preview,
+                url,
+                extraData,
+                encodingStatus
+            };
+
+            // Since the launch of the portfolio whitelabel submission,
+            // we allow the user to specify a thumbnail upon piece-registration.
+            // As the `Component` is chosen according to its filetype but could potentially
+            // have a manually submitted thumbnail, we match if the to `Mediaplayer` submitted thumbnail
+            // is not the generally used fallback `url` (ascribe_spiral.png).
+            //
+            // If this is the case, we disable shmui by deleting the original `url` prop and replace
+            // the assigned component to `Image`.
+            if(!decodeURIComponent(preview).match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/) &&
+               Component === Other) {
+                Component = resourceMap.image;
+                delete componentProps.url;
+            }
+
             return (
                 <div className="ascribe-media-player">
-                    <Component preview={this.props.preview}
+                    <Component {...componentProps}/>
-                               url={this.props.url}
-                               extraData={this.props.extraData}
-                               encodingStatus={this.props.encodingStatus} />
                 </div>
             );
         }