From 01667a005ea4ac1eb4636e829d35efe4db586764 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1rbara=20de=20Castro=20Fernandes?=
 <barbara.dcf@gmail.com>
Date: Sun, 6 Sep 2020 16:08:09 -0300
Subject: [PATCH] Show file icon and name for other file types

Currently the media preview looks blank when the file type is anything
other than an image, video or audio. This commit inserts a generic file
icon and also a label with the filename for these other extensions.
---
 app/soapbox/components/media_gallery.js  | 14 ++++++++++++++
 app/styles/components/media-gallery.scss |  1 +
 2 files changed, 15 insertions(+)

diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index f848a396f..0fc7dcb67 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@@ -142,11 +142,25 @@ class Item extends React.PureComponent {
 
     let thumbnail = '';
 
+    const MAX_FILENAME_LENGTH = 45;
+    const getCroppedFilename = () => {
+      const remoteURL = attachment.get('remote_url');
+      const filenameLastIndex = remoteURL.lastIndexOf('/');
+      const filename = remoteURL.substr(filenameLastIndex + 1);
+      if (filename.length <= MAX_FILENAME_LENGTH)
+        return filename;
+      else
+        return filename.substr(0, MAX_FILENAME_LENGTH/2) + '...' + filename.substr(filename.length - MAX_FILENAME_LENGTH/2);
+    };
+
     if (attachment.get('type') === 'unknown') {
+      const filename = getCroppedFilename();
       return (
         <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
           <a className='media-gallery__item-thumbnail' href={attachment.get('remote_url')} target='_blank' style={{ cursor: 'pointer' }}>
             <canvas width={32} height={32} ref={this.setCanvasRef} className='media-gallery__preview' />
+            <span className='media-gallery__item__icons'><Icon id='file' /></span>
+            <span className='media-gallery__filename__label'>{filename}</span>
           </a>
         </div>
       );
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index 731f361fc..02318c6d8 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -134,6 +134,7 @@
 }
 
 .media-gallery__gifv__label,
+.media-gallery__filename__label,
 .media-gallery__file-extension__label {
   display: block;
   position: absolute;