diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 4ab6e53e0..c71578b7a 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/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 {
GIF
);
+ } 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 = (
+
+
+ {fileExtension}
+
+ );
}
return (
diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index cbb4b4e35..889afc01e 100644
--- a/app/soapbox/components/status.js
+++ b/app/soapbox/components/status.js
@@ -365,7 +365,7 @@ class Status extends ImmutablePureComponent {
)}
);
- } 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 = (
diff --git a/app/soapbox/features/account_gallery/components/media_item.js b/app/soapbox/features/account_gallery/components/media_item.js
index 670e465a8..64a4e2a47 100644
--- a/app/soapbox/features/account_gallery/components/media_item.js
+++ b/app/soapbox/features/account_gallery/components/media_item.js
@@ -147,6 +147,16 @@ class MediaItem extends ImmutablePureComponent {
GIF
);
+ } else if (attachment.get('type') === 'audio') {
+ const remoteURL = attachment.get('remote_url');
+ const fileExtensionLastIndex = remoteURL.lastIndexOf('.');
+ const fileExtension = remoteURL.substr(fileExtensionLastIndex + 1).toUpperCase();
+ thumbnail = (
+
+
+ {fileExtension}
+
+ );
}
if (!visible) {
diff --git a/app/styles/components/audio-player.scss b/app/styles/components/audio-player.scss
index 68e7f065b..5de07b3aa 100644
--- a/app/styles/components/audio-player.scss
+++ b/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;
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index 05ba65a41..798d2233f 100644
--- a/app/styles/components/media-gallery.scss
+++ b/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);