Verified Commit 6bf85517 authored by Haelwenn's avatar Haelwenn
Browse files

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

parent 3918d358
......@@ -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();
......
......@@ -69,6 +69,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;
......
......@@ -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();
......
......@@ -5082,6 +5082,14 @@ a.status-card.compact:hover {
}
}
.media-gallery__audio {
margin-top: 32px;
audio {
width: 100%;
}
}
.attachment-list {
display: flex;
font-size: 14px;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment