Fixes for audio attachments when there is more than 1 attachment and icons for audio attachments

app/soapbox/components/media_gallery.js

@@ -11,6 +11,7 @@ import { decode } from 'blurhash';
 import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
 import { Map as ImmutableMap } from 'immutable';
 import { getSettings } from 'soapbox/actions/settings';
+import Icon from 'soapbox/components/icon';
 
 const messages = defineMessages({
   toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
@@ -225,6 +226,24 @@ class Item extends React.PureComponent {
           <span className='media-gallery__gifv__label'>GIF</span>
         </div>
       );
+    } else if (attachment.get('type') === 'audio') {
+      const remoteURL = attachment.get('remote_url');
+      const originalUrl = attachment.get('url');
+      const fileExtensionLastIndex = remoteURL.lastIndexOf('.');
+      const fileExtension = remoteURL.substr(fileExtensionLastIndex + 1).toUpperCase();
+      thumbnail = (
+        <a
+          className={classNames('media-gallery__item-thumbnail')}
+          href={attachment.get('remote_url') || originalUrl}
+          onClick={this.handleClick}
+          target='_blank'
+          alt={attachment.get('description')}
+          title={attachment.get('description')}
+        >
+          <span className='media-gallery__item__icons'><Icon id='volume-up' /></span>
+          <span className='media-gallery__file-extension__label'>{fileExtension}</span>
+        </a>
+      );
     }
 
     return (

app/soapbox/components/status.js

@@ -365,7 +365,7 @@ class Status extends ImmutablePureComponent {
             )}
           </Bundle>
         );
-      } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
+      } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio' && status.get('media_attachments').size === 1) {
         const audio = status.getIn(['media_attachments', 0]);
 
         media = (

app/soapbox/features/account_gallery/components/media_item.js

@@ -147,6 +147,16 @@ class MediaItem extends ImmutablePureComponent {
           <span className='media-gallery__gifv__label'>GIF</span>
         </div>
       );
+    } else if (attachment.get('type') === 'audio') {
+      const remoteURL = attachment.get('remote_url');
+      const fileExtensionLastIndex = remoteURL.lastIndexOf('.');
+      const fileExtension = remoteURL.substr(fileExtensionLastIndex + 1).toUpperCase();
+      thumbnail = (
+        <div className='media-gallery__item-thumbnail'>
+          <span className='media-gallery__item__icons'><Icon id='volume-up' /></span>
+          <span className='media-gallery__file-extension__label'>{fileExtension}</span>
+        </div>
+      );
     }
 
     if (!visible) {

app/styles/components/audio-player.scss

@@ -176,6 +176,10 @@
     background: hsl( var(--brand-color_h), var(--brand-color_s), 20% );
     padding: 5px;
 
+    &__label {
+      color: white;
+    }
+
     button {
       background: transparent;
       font-size: 16px;

app/styles/components/media-gallery.scss

@@ -16,6 +16,14 @@
   position: relative;
   border-radius: 4px;
   overflow: hidden;
+
+  &__icons {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 100px;
+  }
 }
 
 .media-gallery__item-thumbnail {
@@ -112,7 +120,8 @@
   position: absolute;
 }
 
-.media-gallery__gifv__label {
+.media-gallery__gifv__label,
+.media-gallery__file-extension__label {
   display: block;
   position: absolute;
   color: var(--primary-text-color);