[Glitch-port] Audio player

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

@@ -176,6 +176,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() && autoPlayGif;
 

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

@@ -74,6 +74,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;