From 9b36f62df63003419cb2ca08e77f2fa69fed91ad Mon Sep 17 00:00:00 2001 From: Nima Boscarino Date: Fri, 25 Oct 2019 02:48:20 -0700 Subject: [PATCH] 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 --- app/javascript/mastodon/features/audio/index.js | 9 +++++++++ app/javascript/mastodon/features/video/index.js | 7 +++++++ app/javascript/mastodon/locales/defaultMessages.json | 4 ++++ app/javascript/styles/mastodon/components.scss | 4 ++++ 4 files changed, 24 insertions(+) diff --git a/app/javascript/mastodon/features/audio/index.js b/app/javascript/mastodon/features/audio/index.js index d3b309f0f8..1b4cdbb4f4 100644 --- a/app/javascript/mastodon/features/audio/index.js +++ b/app/javascript/mastodon/features/audio/index.js @@ -12,6 +12,7 @@ const messages = defineMessages({ pause: { id: 'video.pause', defaultMessage: 'Pause' }, mute: { id: 'video.mute', defaultMessage: 'Mute sound' }, unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' }, + download: { id: 'video.download', defaultMessage: 'Download file' }, }); export default @injectIntl @@ -218,6 +219,14 @@ class Audio extends React.PureComponent { {formatTime(this.state.duration || Math.floor(this.props.duration))} + +
+ +
diff --git a/app/javascript/mastodon/features/video/index.js b/app/javascript/mastodon/features/video/index.js index 07051ddf31..7ca477d356 100644 --- a/app/javascript/mastodon/features/video/index.js +++ b/app/javascript/mastodon/features/video/index.js @@ -19,6 +19,7 @@ const messages = defineMessages({ close: { id: 'video.close', defaultMessage: 'Close video' }, fullscreen: { id: 'video.fullscreen', defaultMessage: 'Full screen' }, exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' }, + download: { id: 'video.download', defaultMessage: 'Download file' }, }); export const formatTime = secondsNum => { @@ -494,7 +495,13 @@ class Video extends React.PureComponent { {(!onCloseVideo && !editable) && } {(!fullscreen && onOpenVideo) && } {onCloseVideo && } + + diff --git a/app/javascript/mastodon/locales/defaultMessages.json b/app/javascript/mastodon/locales/defaultMessages.json index 8ab40ce3c7..4778ed56f1 100644 --- a/app/javascript/mastodon/locales/defaultMessages.json +++ b/app/javascript/mastodon/locales/defaultMessages.json @@ -776,6 +776,10 @@ { "defaultMessage": "Unmute sound", "id": "video.unmute" + }, + { + "defaultMessage": "Download file", + "id": "video.download" } ], "path": "app/javascript/mastodon/features/audio/index.json" diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 52fe3bed01..417e8c8990 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -5330,6 +5330,10 @@ a.status-card.compact:hover { display: flex; justify-content: space-between; padding-bottom: 10px; + + .video-player__download__icon { + color: inherit; + } } &__buttons {