diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js
index 9d340ab8..c414dee2 100644
--- a/js/components/ascribe_detail/media_container.js
+++ b/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/'.
- // 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)} />
{embed}
diff --git a/js/components/ascribe_media/media_player.js b/js/components/ascribe_media/media_player.js
index 93fe3995..4cfb4bc2 100644
--- a/js/components/ascribe_media/media_player.js
+++ b/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 (
);
diff --git a/js/utils/file_utils.js b/js/utils/file_utils.js
index 1e4998f8..7557536d 100644
--- a/js/utils/file_utils.js
+++ b/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);
+}