Attachment preview icons

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/compose/components/upload.js

@@ -9,6 +9,40 @@ import classNames from 'classnames';
 import Icon from 'soapbox/components/icon';
 import Blurhash from 'soapbox/components/blurhash';
 
+const MIMETYPE_ICONS = {
+  'application/x-freearc': 'file-archive-o',
+  'application/x-bzip': 'file-archive-o',
+  'application/x-bzip2': 'file-archive-o',
+  'application/gzip': 'file-archive-o',
+  'application/vnd.rar': 'file-archive-o',
+  'application/x-tar': 'file-archive-o',
+  'application/zip': 'file-archive-o',
+  'application/x-7z-compressed': 'file-archive-o',
+  'application/x-csh': 'file-code-o',
+  'application/html': 'file-code-o',
+  'text/javascript': 'file-code-o',
+  'application/json': 'file-code-o',
+  'application/ld+json': 'file-code-o',
+  'application/x-httpd-php': 'file-code-o',
+  'application/x-sh': 'file-code-o',
+  'application/xhtml+xml': 'file-code-o',
+  'application/xml': 'file-code-o',
+  'application/epub+zip': 'file-epub-o',
+  'application/vnd.oasis.opendocument.spreadsheet': 'file-excel-o',
+  'application/vnd.ms-excel': 'file-excel-o',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'file-excel-o',
+  'application/pdf': 'file-pdf-o',
+  'application/vnd.oasis.opendocument.presentation': 'file-powerpoint-o',
+  'application/vnd.ms-powerpoint': 'file-powerpoint-o',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'file-powerpoint-o',
+  'text/plain': 'file-text-o',
+  'application/rtf': 'file-text-o',
+  'application/msword': 'file-word-o',
+  'application/x-abiword': 'file-word-o',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'file-word-o',
+  'application/vnd.oasis.opendocument.text': 'file-word-o',
+};
+
 const messages = defineMessages({
   description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
   delete: { id: 'upload_form.undo', defaultMessage: 'Delete' },
@@ -100,6 +134,11 @@ class Upload extends ImmutablePureComponent {
     const x = ((focusX /  2) + .5) * 100;
     const y = ((focusY / -2) + .5) * 100;
     const mediaType = media.get('type');
+    const uploadIcon = mediaType === 'unknown' && (
+      <Icon
+        id={MIMETYPE_ICONS[media.getIn(['pleroma', 'mime_type'])] || 'paperclip'}
+      />
+    );
 
     return (
       <div className='compose-form__upload' tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick} role='button'>
@@ -115,7 +154,7 @@ class Upload extends ImmutablePureComponent {
             >
               <div className={classNames('compose-form__upload__actions', { active })}>
                 <button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
-                <button className='icon-button' onClick={this.handleOpenModal}><Icon id='search-plus' /> <FormattedMessage id='upload_form.preview' defaultMessage='Preview' /></button>
+                {mediaType !== 'unknown' && <button className='icon-button' onClick={this.handleOpenModal}><Icon id='search-plus' /> <FormattedMessage id='upload_form.preview' defaultMessage='Preview' /></button>}
               </div>
 
               <div className={classNames('compose-form__upload-description', { active })}>
@@ -140,6 +179,7 @@ class Upload extends ImmutablePureComponent {
                     <source src={media.get('preview_url')} />
                   </video>
                 )}
+                {uploadIcon}
               </div>
             </div>
           )}

app/styles/components/compose-form.scss

@@ -297,6 +297,14 @@
           height: 100%;
           object-fit: cover;
         }
+
+        > i.fa {
+          width: 100%;
+          color: hsla(var(--primary-text-color_hsl), 0.4);
+          font-size: 64px;
+          text-align: center;
+          line-height: 160px;
+        }
       }
     }