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);