From: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
Date: Fri, 28 Dec 2018 12:03:51 +0000 (+0100)
Subject: Display file preview if file is an image
X-Git-Url: https://git.arvados.org/arvados.git/commitdiff_plain/0a8f679e97c4579af833afad02b74816b666c7af

Display file preview if file is an image

Feature #14684

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
---

diff --git a/src/views-components/details-panel/file-details.tsx b/src/views-components/details-panel/file-details.tsx
index 7d43bd4b3b..db7c9cfe0f 100644
--- a/src/views-components/details-panel/file-details.tsx
+++ b/src/views-components/details-panel/file-details.tsx
@@ -9,6 +9,7 @@ import { getIcon } from '~/components/file-tree/file-tree-item';
 import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
 import { formatFileSize } from '~/common/formatters';
 import { FileThumbnail } from '~/components/file-tree/file-thumbnail';
+import isImage from 'is-image';
 
 export class FileDetails extends DetailsData<CollectionFile | CollectionDirectory> {
 
@@ -22,8 +23,12 @@ export class FileDetails extends DetailsData<CollectionFile | CollectionDirector
         return item.type === CollectionFileType.FILE
             ? <>
                 <DetailsAttribute label='Size' value={formatFileSize(item.size)} />
-                <DetailsAttribute label='Preview' />
-                <FileThumbnail file={item}/>
+                {
+                    isImage(item.url) && <>
+                        <DetailsAttribute label='Preview' />
+                        <FileThumbnail file={item} />
+                    </>
+                }
             </>
             : <div />;
     }