app/javascript/mastodon/components/media_gallery.js: Add support for audio attachements

app/javascript/flavours/glitch/components/media_gallery.js

@@ -226,6 +226,21 @@ class Item extends React.PureComponent {
           />
         </a>
       );
+    } else if (attachment.get('type') === 'audio') {
+      thumbnail = (
+        <div
+          className='media-gallery__audio'
+          aria-label={attachment.get('description')}
+          role='application'
+        >
+          <span><p>sound<br/>only</p></span>
+          <span><p>{attachment.get('description')}</p></span>
+          <audio
+            src={attachment.get('url')}
+            controls
+          />
+        </div>
+        );
     } else if (attachment.get('type') === 'gifv') {
       const autoPlay = !isIOS() && this.getAutoPlay();
 

app/javascript/flavours/glitch/styles/components/media.scss

@@ -75,6 +75,28 @@
   }
 }
 
+.media-gallery__audio {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  span {
+    text-align: center;
+    color: $darker-text-color;
+    display: flex;
+    height: 100%;
+    align-items: center;
+
+    p {
+      width: 100%;
+    }
+  }
+
+  audio {
+    width: 100%;
+  }
+}
+
 .media-gallery {
   box-sizing: border-box;
   margin-top: 8px;

app/javascript/mastodon/components/media_gallery.js

@@ -205,6 +205,18 @@ class Item extends React.PureComponent {
           />
         </a>
       );
+    } else if (attachment.get('type') === 'audio') {
+      thumbnail = (
+        <div className='media-gallery__audio'>
+          <audio
+            className='media-gallery__item-audio-thumbnail'
+            aria-label={attachment.get('description')}
+            role='application'
+            src={attachment.get('url')}
+            controls
+          />
+        </div>
+      );
     } else if (attachment.get('type') === 'gifv') {
       const autoPlay = !isIOS() && this.getAutoPlay();
 

app/javascript/styles/mastodon/components.scss

@@ -5071,6 +5071,14 @@ a.status-card.compact:hover {
   }
 }
 
+.media-gallery__audio {
+  margin-top: 32px;
+
+  audio {
+    width: 100%;
+  }
+}
+
 .attachment-list {
   display: flex;
   font-size: 14px;