Merge pull request #172 from ascribe/AG-171-support-tiff-submissions

Add async tiff thumbnail encoding support

js/components/ascribe_detail/media_container.js

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import Button from 'react-bootstrap/lib/Button';
+import ProgressBar from 'react-bootstrap/lib/ProgressBar';
 
 import MediaPlayer from './../ascribe_media/media_player';
 
@@ -13,17 +14,22 @@ import S3DownloadButton from '../ascribe_buttons/s3_download_button';
 
 import CollapsibleButton from './../ascribe_collapsible/collapsible_button';
 
+import AscribeSpinner from '../ascribe_spinner';
+
 import AclProxy from '../acl_proxy';
 
+import AppConstants from '../../constants/application_constants';
+
 import { getLangText } from '../../utils/lang_utils';
-import { extractFileExtensionFromString } from '../../utils/file_utils';
+
+import { extractFileExtensionFromUrl } from '../../utils/file_utils';
 
 
 const EMBED_IFRAME_HEIGHT = {
     video: 315,
     audio: 62
 };
-const ENCODE_UPDATE_TIME = 5000;
+
 
 let MediaContainer = React.createClass({
     propTypes: {
@@ -41,21 +47,18 @@ let MediaContainer = React.createClass({
 
     componentDidMount() {
         const { content: { digital_work: digitalWork }, refreshObject } = this.props;
+        const { timerId } = this.state;
 
-        if (digitalWork) {
+        if (digitalWork && (this.isVideoEncoding() || this.isImageEncoding()) && !timerId) {
-            const isEncoding = digitalWork.isEncoding;
+            this.setState({ timerId: window.setInterval(refreshObject, AppConstants.encodeUpdateThreshold) });
-
-            if (digitalWork.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
-                this.setState({
-                    timerId: window.setInterval(refreshObject, ENCODE_UPDATE_TIME)
-                });
-            }
         }
     },
 
     componentWillUpdate() {
-        if (this.props.content.digital_work.isEncoding === 100) {
+        const { timerId } = this.state;
-            window.clearInterval(this.state.timerId);
+
+        if (!(this.isVideoEncoding() || this.isImageEncoding()) && timerId) {
+            window.clearInterval(timerId);
         }
     },
 
@@ -63,30 +66,62 @@ let MediaContainer = React.createClass({
         window.clearInterval(this.state.timerId);
     },
 
+    isVideoEncoding() {
+        const { content: { digital_work: digitalWork } } = this.props;
+        return digitalWork.mime === 'video' && digitalWork.isEncoding === 'number' && digitalWork.isEncoding !== 100;
+    },
+
+    isImageEncoding() {
+        const { content: { thumbnail, digital_work: digitalWork } } = this.props;
+        const thumbnailFileExtension = extractFileExtensionFromUrl(thumbnail.thumbnail_sizes['600x600']);
+
+        return digitalWork.mime === 'image' && (thumbnailFileExtension === 'tif' || thumbnailFileExtension === 'tiff');
+    },
+
+    getEncodingMessage() {
+        if (this.isVideoEncoding()) {
+            const { digital_work: digitalWork } = this.props;
+
+            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={digitalWork.isEncoding}
+                        label="%(percent)s%"
+                        className="ascribe-progress-bar" />
+                </div>
+            );
+        } else if (this.isImageEncoding()) {
+            return (
+                <div className="ascribe-media-player encoding-image">
+                    <AscribeSpinner color='dark-blue' size='lg' />
+                    <em className="text-center">
+                        {getLangText('We successfully received your image and it is now being encoded.')}
+                        <br />
+                        {getLangText('We will be refreshing this page as soon as encoding has finished.')}
+                        <br />
+                        {getLangText('(You may close this page)')}
+                    </em>
+                </div>
+            );
+        }
+    },
+
     render() {
         const { content, currentUser } = this.props;
+        const mimetype = content.digital_work.mime;
         // Pieces and editions are joined to the user by a foreign key in the database, so
         // the information in content will be updated if a user updates their username.
         // We also force uniqueness of usernames, so this check is safe to dtermine if the
         // content was registered by the current user.
         const didUserRegisterContent = currentUser && (currentUser.username === content.user_registered);
+        const thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ? content.thumbnail.thumbnail_sizes['600x600']
+                                                                                                            : content.thumbnail.url_safe;
 
-        // We want to show the file's extension as a label of the download button.
-        // We can however not only use `extractFileExtensionFromString` on the url for that
-        // as files might be saved on S3 without a file extension which leads
-        // `extractFileExtensionFromString` to extract everything starting from the top level
-        // domain: e.g. '.net/live/<hash>'.
-        // Therefore, we extract the file's name (last part of url, separated with a slash)
-        // and try to extract the file extension from there.
-        const fileName = content.digital_work.url.split('/').pop();
-        const fileExtension = extractFileExtensionFromString(fileName);
-
-        let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ?
-            content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe;
-        let mimetype = content.digital_work.mime;
         let embed = null;
         let extraData = null;
-        let isEmbedDisabled = mimetype === 'video' && content.digital_work.isEncoding !== undefined && content.digital_work.isEncoding !== 100;
 
         if (content.digital_work.encoding_urls) {
             extraData = content.digital_work.encoding_urls.map(e => { return { url: e.url, type: e.label }; });
@@ -101,7 +136,7 @@ let MediaContainer = React.createClass({
                         <Button
                             bsSize="xsmall"
                             className="ascribe-margin-1px"
-                            disabled={isEmbedDisabled}>
+                            disabled={this.isVideoEncoding()}>
                             {getLangText('Embed')}
                         </Button>
                     }
@@ -117,17 +152,16 @@ let MediaContainer = React.createClass({
             <div>
                 <MediaPlayer
                     mimetype={mimetype}
-                    preview={thumbnail}
+                    thumbnail={thumbnail}
                     url={content.digital_work.url}
                     extraData={extraData}
-                    encodingStatus={content.digital_work.isEncoding} />
+                    encodingMessage={this.getEncodingMessage()} />
                 <p className="text-center hidden-print">
                     <span className="ascribe-social-button-list">
                         <FacebookShareButton />
                         <TwitterShareButton
                             text={getLangText('Check out %s ascribed piece', didUserRegisterContent ? 'my latest' : 'this' )} />
                     </span>
-
                     <AclProxy
                         show={['video', 'audio', 'image'].indexOf(mimetype) === -1 || content.acl.acl_download}
                         aclObject={content.acl}
@@ -136,7 +170,7 @@ let MediaContainer = React.createClass({
                             url={content.digital_work.url}
                             title={content.title}
                             artistName={content.artist_name}
-                            fileExtension={fileExtension} />
+                            fileExtension={extractFileExtensionFromUrl(content.digital_work.url)} />
                     </AclProxy>
                     {embed}
                 </p>

js/components/ascribe_media/media_player.js

@@ -4,11 +4,11 @@ import React from 'react';
 import Q from 'q';
 
 import Panel from 'react-bootstrap/lib/Panel';
-import ProgressBar from 'react-bootstrap/lib/ProgressBar';
 
 import AppConstants from '../../constants/application_constants';
 
 import { escapeHTML } from '../../utils/general_utils';
+import { extractFileExtensionFromUrl } from '../../utils/file_utils';
 import { InjectInHeadUtils } from '../../utils/inject_utils';
 
 /**
@@ -31,18 +31,18 @@ let Other = React.createClass({
     render() {
         let filename = this.props.url.split('/').pop();
         let tokens = filename.split('.');
-        let preview;
+        let thumbnail;
 
         if (tokens.length > 1) {
-            preview = '.' + tokens.pop();
+            thumbnail = '.' + tokens.pop();
         } else {
-            preview = 'file';
+            thumbnail = 'file';
         }
 
         return (
             <Panel className="media-other">
                 <p className="text-center">
-                    {preview}
+                    {thumbnail}
                 </p>
             </Panel>
         );
@@ -52,11 +52,11 @@ let Other = React.createClass({
 let Image = React.createClass({
     propTypes: {
         url: React.PropTypes.string,
-        preview: React.PropTypes.string.isRequired
+        thumbnail: React.PropTypes.string.isRequired
     },
 
     componentDidMount() {
-        if(this.props.url) {
+        if (this.props.url) {
             InjectInHeadUtils.inject(AppConstants.jquery.sdkUrl)
                 .then(() =>
                     Q.all([
@@ -67,15 +67,17 @@ let Image = React.createClass({
     },
 
     render() {
-        const { url, preview } = this.props;
+        const { url, thumbnail } = this.props;
+        const urlFileExtension = extractFileExtensionFromUrl(url);
 
-        if(url) {
+        // TIFFs can not be displayed by the browser, so we just display their thumbnail
+        if (url && urlFileExtension !== 'tif' && urlFileExtension !== 'tiff') {
             return (
-                <img className="shmui-ascribe" src={preview} data-large-src={url}/>
+                <img className="shmui-ascribe" src={thumbnail} data-large-src={url} />
             );
         } else {
             return (
-                <img src={preview}/>
+                <img src={thumbnail} />
             );
         }
     }
@@ -130,10 +132,9 @@ let Video = React.createClass({
      */
 
     propTypes: {
-        preview: React.PropTypes.string.isRequired,
+        thumbnail: React.PropTypes.string.isRequired,
         url: React.PropTypes.string.isRequired,
-        extraData: React.PropTypes.array.isRequired,
+        extraData: React.PropTypes.array.isRequired
-        encodingStatus: React.PropTypes.number
     },
 
     getInitialState() {
@@ -170,7 +171,7 @@ let Video = React.createClass({
     prepareVideoHTML() {
         let sources = this.props.extraData.map((data) => '<source type="video/' + data.type + '" src="' + escapeHTML(data.url) + '" />');
         let html = [
-            '<video id="mainvideo" class="video-js vjs-default-skin" poster="' + escapeHTML(this.props.preview) + '"',
+            '<video id="mainvideo" class="video-js vjs-default-skin" poster="' + escapeHTML(this.props.thumbnail) + '"',
                    'controls preload="none" width="auto" height="auto">',
                    sources.join('\n'),
             '</video>'];
@@ -184,7 +185,7 @@ let Video = React.createClass({
             );
         } else {
             return (
-                <Image preview={this.props.preview} />
+                <Image thumbnail={this.props.thumbnail} />
             );
         }
     }
@@ -200,38 +201,29 @@ let resourceMap = {
 let MediaPlayer = React.createClass({
     propTypes: {
         mimetype: React.PropTypes.oneOf(['image', 'video', 'audio', 'pdf', 'other']).isRequired,
-        preview: React.PropTypes.string.isRequired,
+        thumbnail: React.PropTypes.string.isRequired,
         url: React.PropTypes.string.isRequired,
         extraData: React.PropTypes.array,
-        encodingStatus: React.PropTypes.number
+        encodingMessage: React.PropTypes.node
     },
 
     render() {
-        const { mimetype,
+        const {
-                preview,
+            mimetype,
-                url,
+            thumbnail,
-                extraData,
+            url,
-                encodingStatus } = this.props;
+            extraData,
+            encodingMessage
+        } = this.props;
 
-        if (mimetype === 'video' && encodingStatus !== undefined && encodingStatus !== 100) {
+        if (encodingMessage) {
-            return (
+            return encodingMessage;
-                <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={encodingStatus}
-                        label="%(percent)s%"
-                        className="ascribe-progress-bar" />
-                </div>
-            );
         } else {
             let Component = resourceMap[mimetype] || Other;
             let componentProps = {
-                preview,
+                thumbnail,
                 url,
                 extraData,
-                encodingStatus
             };
 
             // Since the launch of the portfolio whitelabel submission,
@@ -242,7 +234,7 @@ let MediaPlayer = React.createClass({
             //
             // 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/) &&
+            if (!decodeURIComponent(thumbnail).match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/) &&
                Component === Other) {
                 Component = resourceMap.image;
                 delete componentProps.url;

js/constants/application_constants.js

@@ -92,13 +92,15 @@ const constants = {
 
     'searchThreshold': 500,
 
+    'encodeUpdateThreshold': 5000,
+
     'supportedThumbnailFileFormats': [
         'x-sgi-movie', 'x-msvideo', 'quicktime', 'mpeg', 'png', 'jpeg', 'gif',
         'ogg', 'oga', 'ogv', 'ogx', 'wmv', 'wma', 'flv', '3gpp2', '3p2', '3pg',
         'png', 'jpg', 'jpeg', 'gif', '264', '3g', '3g2', '3gp', '3gp2', '3gpp',
         'mp4', 'm4a', 'm4v', 'f4v', 'f4a', 'm4b', 'm4r', 'f4b', 'mov', 'quicktime',
         'webm', 'x264', 'mpeg', 'mpeg4', 'mpg4', 'bmp', 'eps', 'jp2', 'j2k', 'jpm',
-        'mj2'
+        'mj2', 'tif', 'tiff'
     ],
 
     // in case of whitelabel customization, we store stuff here

js/utils/file_utils.js

@@ -102,3 +102,17 @@ export function extractFileExtensionFromString(s) {
     return explodedFileName.length > 1 ? explodedFileName.pop()
                                        : '';
 }
+
+
+/**
+ * Extracts a file extension from a url.
+ *
+ * If a file without an extension is submitted (file), then
+ * this method just returns an empty string.
+ * @param  {string}     url A url ending in a file
+ * @return {string}     a file extension
+ */
+export function extractFileExtensionFromUrl(url) {
+    const fileName = url.split('/').pop();
+    return extractFileExtensionFromString(fileName);
+}

sass/ascribe_media_player.scss

@@ -115,5 +115,15 @@
     .vjs-default-skin .vjs-control-bar {
         background-color: rgba(0,0,0,.7);
     }
+
+    &.encoding-image {
+        text-align: center;
+        margin: 2em 0 2em 0;
+
+        em {
+            display: block;
+            margin-top: 1em;
+        }
+    }
 }