Restrict thumbnail expansion if file is TIFF

js/components/ascribe_detail/media_container.js

@@ -21,7 +21,8 @@ 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 = {
@@ -72,7 +73,7 @@ let MediaContainer = React.createClass({
 
     isImageEncoding() {
         const { content: { thumbnail, digital_work: digitalWork } } = this.props;
-        const thumbnailFileExtension = this.getFileExtensionFromUrl(thumbnail.thumbnail_sizes['600x600']);
+        const thumbnailFileExtension = extractFileExtensionFromUrl(thumbnail.thumbnail_sizes['600x600']);
 
         return digitalWork.mime === 'image' && (thumbnailFileExtension === 'tif' || thumbnailFileExtension === 'tiff');
     },
@@ -108,18 +109,6 @@ let MediaContainer = React.createClass({
         }
     },
 
-    getFileExtensionFromUrl(url) {
-        // 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 = url.split('/').pop();
-        return extractFileExtensionFromString(fileName);
-    },
-
     render() {
         const { content, currentUser } = this.props;
         const mimetype = content.digital_work.mime;
@@ -181,7 +170,7 @@ let MediaContainer = React.createClass({
                             url={content.digital_work.url}
                             title={content.title}
                             artistName={content.artist_name}
-                            fileExtension={this.getFileExtensionFromUrl(content.digital_work.url)} />
+                            fileExtension={extractFileExtensionFromUrl(content.digital_work.url)} />
                     </AclProxy>
                     {embed}
                 </p>

js/components/ascribe_media/media_player.js

@@ -8,6 +8,7 @@ import Panel from 'react-bootstrap/lib/Panel';
 import AppConstants from '../../constants/application_constants';
 
 import { escapeHTML } from '../../utils/general_utils';
+import { extractFileExtensionFromUrl } from '../../utils/file_utils';
 import { InjectInHeadUtils } from '../../utils/inject_utils';
 
 /**
@@ -67,8 +68,10 @@ let Image = React.createClass({
 
     render() {
         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={thumbnail} data-large-src={url} />
             );

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);
+}