Merge branch 'media-fallback-icon' into 'develop'

Show file icon and name for other file types

Closes #394

See merge request soapbox-pub/soapbox-fe!215

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

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;