cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Add download button to audio and video players (#12179) 

* Add download button for audio player

* Add download button for video player

* fix padding for download button in Audio component
This commit is contained in:
Nima Boscarino 2019-10-25 02:48:20 -07:00 committed by Eugen Rochko
parent 91945aa78a
commit 9b36f62df6
4 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/mastodon/features/audio/index.js
View File

@ -12,6 +12,7 @@ const messages = defineMessages({
pause: { id: 'video.pause', defaultMessage: 'Pause' }, pause: { id: 'video.pause', defaultMessage: 'Pause' },
mute: { id: 'video.mute', defaultMessage: 'Mute sound' }, mute: { id: 'video.mute', defaultMessage: 'Mute sound' },
unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' }, unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' },
download: { id: 'video.download', defaultMessage: 'Download file' },
}); });
export default @injectIntl export default @injectIntl
@ -218,6 +219,14 @@ class Audio extends React.PureComponent {
<span className='video-player__time-total'>{formatTime(this.state.duration || Math.floor(this.props.duration))}</span> <span className='video-player__time-total'>{formatTime(this.state.duration || Math.floor(this.props.duration))}</span>
</span> </span>
</div> </div>
<div className='video-player__buttons right'>
<button type='button' aria-label={intl.formatMessage(messages.download)}>
<a className='video-player__download__icon' href={this.props.src} download>
<Icon id={'download'} fixedWidth />
</a>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>

7
app/javascript/mastodon/features/video/index.js
View File

@ -19,6 +19,7 @@ const messages = defineMessages({
close: { id: 'video.close', defaultMessage: 'Close video' }, close: { id: 'video.close', defaultMessage: 'Close video' },
fullscreen: { id: 'video.fullscreen', defaultMessage: 'Full screen' }, fullscreen: { id: 'video.fullscreen', defaultMessage: 'Full screen' },
exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' }, exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' },
download: { id: 'video.download', defaultMessage: 'Download file' },
}); });
export const formatTime = secondsNum => { export const formatTime = secondsNum => {
@ -494,7 +495,13 @@ class Video extends React.PureComponent {
{(!onCloseVideo && !editable) && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>} {(!onCloseVideo && !editable) && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
{(!fullscreen && onOpenVideo) && <button type='button' aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><Icon id='expand' fixedWidth /></button>} {(!fullscreen && onOpenVideo) && <button type='button' aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><Icon id='expand' fixedWidth /></button>}
{onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><Icon id='compress' fixedWidth /></button>} {onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><Icon id='compress' fixedWidth /></button>}
<button type='button' aria-label={intl.formatMessage(messages.download)}>
<a className='video-player__download__icon' href={this.props.src} download>
<Icon id={'download'} fixedWidth />
</a>
</button>
<button type='button' aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><Icon id={fullscreen ? 'compress' : 'arrows-alt'} fixedWidth /></button> <button type='button' aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><Icon id={fullscreen ? 'compress' : 'arrows-alt'} fixedWidth /></button>
</div> </div>
</div> </div>
</div> </div>

4
app/javascript/mastodon/locales/defaultMessages.json
View File

@ -776,6 +776,10 @@
{ {
"defaultMessage": "Unmute sound", "defaultMessage": "Unmute sound",
"id": "video.unmute" "id": "video.unmute"
},
{
"defaultMessage": "Download file",
"id": "video.download"
} }
], ],
"path": "app/javascript/mastodon/features/audio/index.json" "path": "app/javascript/mastodon/features/audio/index.json"

4
app/javascript/styles/mastodon/components.scss
View File

@ -5330,6 +5330,10 @@ a.status-card.compact:hover {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-bottom: 10px; padding-bottom: 10px;
.video-player__download__icon {
color: inherit;
}
} }
&__buttons { &__buttons {