From 662a49dc3f06749936cedd7349092bbe622f0bc6 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 25 Jun 2020 01:33:01 +0200 Subject: Fix various issues around OpenGraph representation of media (#14133) - Fix audio attachments not being represented in OpenGraph tags - Fix audio being represented as "1 image" in OpenGraph descriptions - Fix video metadata being overwritten by paperclip-av-transcoder - Fix embedded player not using Mastodon's UI - Fix audio/video progress bars not moving smoothly - Fix audio/video buffered bars not displaying correctly --- app/javascript/mastodon/features/audio/index.js | 23 +++++++++-------- app/javascript/mastodon/features/video/index.js | 33 +++++++++++++++++-------- app/javascript/styles/mastodon/basics.scss | 27 +++++++++++++++++++- 3 files changed, 62 insertions(+), 21 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/features/audio/index.js b/app/javascript/mastodon/features/audio/index.js index 9da143c96..5f6132f12 100644 --- a/app/javascript/mastodon/features/audio/index.js +++ b/app/javascript/mastodon/features/audio/index.js @@ -154,6 +154,7 @@ class Audio extends React.PureComponent { width: PropTypes.number, height: PropTypes.number, editable: PropTypes.bool, + fullscreen: PropTypes.bool, intl: PropTypes.object.isRequired, cacheWidth: PropTypes.func, }; @@ -180,7 +181,7 @@ class Audio extends React.PureComponent { _setDimensions () { const width = this.player.offsetWidth; - const height = width / (16/9); + const height = this.props.fullscreen ? this.player.offsetHeight : (width / (16/9)); if (this.props.cacheWidth) { this.props.cacheWidth(width); @@ -291,8 +292,10 @@ class Audio extends React.PureComponent { } handleProgress = () => { - if (this.audio.buffered.length > 0) { - this.setState({ buffer: this.audio.buffered.end(0) / this.audio.duration * 100 }); + const lastTimeRange = this.audio.buffered.length - 1; + + if (lastTimeRange > -1) { + this.setState({ buffer: Math.ceil(this.audio.buffered.end(lastTimeRange) / this.audio.duration * 100) }); } } @@ -349,18 +352,18 @@ class Audio extends React.PureComponent { handleMouseMove = throttle(e => { const { x } = getPointerPosition(this.seek, e); - const currentTime = Math.floor(this.audio.duration * x); + const currentTime = this.audio.duration * x; if (!isNaN(currentTime)) { this.setState({ currentTime }, () => { this.audio.currentTime = currentTime; }); } - }, 60); + }, 15); handleTimeUpdate = () => { this.setState({ - currentTime: Math.floor(this.audio.currentTime), + currentTime: this.audio.currentTime, duration: Math.floor(this.audio.duration), }); } @@ -373,7 +376,7 @@ class Audio extends React.PureComponent { this.audio.volume = x; }); } - }, 60); + }, 15); handleScroll = throttle(() => { if (!this.canvas || !this.audio) { @@ -451,6 +454,7 @@ class Audio extends React.PureComponent { _renderCanvas () { requestAnimationFrame(() => { + this.handleTimeUpdate(); this._clear(); this._draw(); @@ -622,7 +626,7 @@ class Audio extends React.PureComponent { const progress = (currentTime / duration) * 100; return ( -
+
- {formatTime(currentTime)} + {formatTime(Math.floor(currentTime))} / {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 1f85375ff..135200a3d 100644 --- a/app/javascript/mastodon/features/video/index.js +++ b/app/javascript/mastodon/features/video/index.js @@ -177,15 +177,26 @@ class Video extends React.PureComponent { handlePlay = () => { this.setState({ paused: false }); + this._updateTime(); } handlePause = () => { this.setState({ paused: true }); } + _updateTime () { + requestAnimationFrame(() => { + this.handleTimeUpdate(); + + if (!this.state.paused) { + this._updateTime(); + } + }); + } + handleTimeUpdate = () => { this.setState({ - currentTime: Math.floor(this.video.currentTime), + currentTime: this.video.currentTime, duration: Math.floor(this.video.duration), }); } @@ -217,7 +228,7 @@ class Video extends React.PureComponent { this.video.volume = x; }); } - }, 60); + }, 15); handleMouseDown = e => { document.addEventListener('mousemove', this.handleMouseMove, true); @@ -245,13 +256,14 @@ class Video extends React.PureComponent { handleMouseMove = throttle(e => { const { x } = getPointerPosition(this.seek, e); - const currentTime = Math.floor(this.video.duration * x); + const currentTime = this.video.duration * x; if (!isNaN(currentTime)) { - this.video.currentTime = currentTime; - this.setState({ currentTime }); + this.setState({ currentTime }, () => { + this.video.currentTime = currentTime; + }); } - }, 60); + }, 15); togglePlay = () => { if (this.state.paused) { @@ -387,8 +399,10 @@ class Video extends React.PureComponent { } handleProgress = () => { - if (this.video.buffered.length > 0) { - this.setState({ buffer: this.video.buffered.end(0) / this.video.duration * 100 }); + const lastTimeRange = this.video.buffered.length - 1; + + if (lastTimeRange > -1) { + this.setState({ buffer: Math.ceil(this.video.buffered.end(lastTimeRange) / this.video.duration * 100) }); } } @@ -484,7 +498,6 @@ class Video extends React.PureComponent { onClick={this.togglePlay} onPlay={this.handlePlay} onPause={this.handlePause} - onTimeUpdate={this.handleTimeUpdate} onLoadedData={this.handleLoadedData} onProgress={this.handleProgress} onVolumeChange={this.handleVolumeChange} @@ -525,7 +538,7 @@ class Video extends React.PureComponent { {(detailed || fullscreen) && ( - {formatTime(currentTime)} + {formatTime(Math.floor(currentTime))} / {formatTime(duration)} diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index a5dbe75fb..9e63b1d31 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -68,7 +68,32 @@ body { } &.player { - text-align: center; + padding: 0; + margin: 0; + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; + + & > div { + height: 100%; + } + + .video-player video { + width: 100%; + height: 100%; + max-height: 100vh; + } + + .media-gallery { + margin-top: 0; + height: 100% !important; + border-radius: 0; + } + + .media-gallery__item { + border-radius: 0; + } } &.embed { -- cgit From 0a56a4a1bc97aac7c10a70a62361c0edfcb2cc54 Mon Sep 17 00:00:00 2001 From: ThibG Date: Thu, 25 Jun 2020 22:41:12 +0200 Subject: Fix avatar size in public page detailed status (#14140) Regression from the inline-CSS changes --- app/javascript/styles/mastodon/statuses.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'app/javascript') diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss index a8fd2936c..7ae1c5a24 100644 --- a/app/javascript/styles/mastodon/statuses.scss +++ b/app/javascript/styles/mastodon/statuses.scss @@ -140,6 +140,11 @@ .detailed-status { padding: 15px; + + .detailed-status__display-avatar .account__avatar { + width: 48px; + height: 48px; + } } .status { -- cgit From 1d2b0d2121550bf973e8a334cfa29c6d8749c52c Mon Sep 17 00:00:00 2001 From: ThibG Date: Thu, 25 Jun 2020 22:42:01 +0200 Subject: Fix design issues with sensitive preview cards (#14126) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fix design issues with sensitive preview cards * Center “sensitive” label on preview image for interactive cards * Add “button” role to sensitive preview card text --- app/javascript/mastodon/features/status/components/card.js | 9 +++++---- app/javascript/styles/mastodon/components.scss | 1 + 2 files changed, 6 insertions(+), 4 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/features/status/components/card.js b/app/javascript/mastodon/features/status/components/card.js index 4442ab495..e35b1fd5f 100644 --- a/app/javascript/mastodon/features/status/components/card.js +++ b/app/javascript/mastodon/features/status/components/card.js @@ -191,7 +191,9 @@ export default class Card extends React.PureComponent { this.setState({ previewLoaded: true }); } - handleReveal = () => { + handleReveal = e => { + e.preventDefault(); + e.stopPropagation(); this.setState({ revealed: true }); } @@ -279,7 +281,7 @@ export default class Card extends React.PureComponent { } return ( -
+
{embed} {!compact && description}
@@ -289,14 +291,12 @@ export default class Card extends React.PureComponent {
{canvas} {thumbnail} - {!revealed && spoilerButton}
); } else { embed = (
- {!revealed && spoilerButton}
); } @@ -305,6 +305,7 @@ export default class Card extends React.PureComponent { {embed} {description} + {!revealed && spoilerButton} ); } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index fb9dca41b..2ff9073db 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3003,6 +3003,7 @@ a.account__display-name { } .status-card { + position: relative; display: flex; font-size: 14px; border: 1px solid lighten($ui-base-color, 8%); -- cgit From 418f0a33e9bcd8a1a2384b426bb3cc59b712ef98 Mon Sep 17 00:00:00 2001 From: Takeshi Umeda Date: Fri, 26 Jun 2020 05:43:59 +0900 Subject: Add a visibility icon to status (#14123) * Add a visibility icon to status * Change to using the icon element * Fix RTL * Add a public globe --- app/helpers/application_helper.rb | 12 ++++ app/javascript/mastodon/components/status.js | 19 ++++++- .../features/status/components/detailed_status.js | 66 ++++++++++++++-------- app/javascript/styles/mastodon/components.scss | 9 ++- app/javascript/styles/mastodon/rtl.scss | 1 + app/views/statuses/_detailed_status.html.haml | 15 ++--- app/views/statuses/_simple_status.html.haml | 4 +- 7 files changed, 90 insertions(+), 36 deletions(-) (limited to 'app/javascript') diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 2c03bd1d5..716df0bac 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -77,6 +77,18 @@ module ApplicationHelper content_tag(:i, nil, attributes.merge(class: class_names.join(' '))) end + def visibility_icon(status) + if status.public_visibility? + fa_icon('globe', title: I18n.t('statuses.visibilities.public')) + elsif status.unlisted_visibility? + fa_icon('unlock', title: I18n.t('statuses.visibilities.unlisted')) + elsif status.private_visibility? || status.limited_visibility? + fa_icon('lock', title: I18n.t('statuses.visibilities.private')) + elsif status.direct_visibility? + fa_icon('envelope', title: I18n.t('statuses.visibilities.direct')) + end + end + def custom_emoji_tag(custom_emoji, animate = true) if animate image_tag(custom_emoji.image.url, class: 'emojione', alt: ":#{custom_emoji.shortcode}:") diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 5f42534ba..2dc961936 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -10,7 +10,7 @@ import StatusContent from './status_content'; import StatusActionBar from './status_action_bar'; import AttachmentList from './attachment_list'; import Card from '../features/status/components/card'; -import { injectIntl, FormattedMessage } from 'react-intl'; +import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { MediaGallery, Video, Audio } from '../features/ui/util/async-components'; import { HotKeys } from 'react-hotkeys'; @@ -51,6 +51,13 @@ export const defaultMediaVisibility = (status) => { return (displayMedia !== 'hide_all' && !status.get('sensitive') || displayMedia === 'show_all'); }; +const messages = defineMessages({ + public_short: { id: 'privacy.public.short', defaultMessage: 'Public' }, + unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' }, + private_short: { id: 'privacy.private.short', defaultMessage: 'Followers-only' }, + direct_short: { id: 'privacy.direct.short', defaultMessage: 'Direct' }, +}); + export default @injectIntl class Status extends ImmutablePureComponent { @@ -416,6 +423,15 @@ class Status extends ImmutablePureComponent { statusAvatar = ; } + const visibilityIconInfo = { + 'public': { icon: 'globe', text: intl.formatMessage(messages.public_short) }, + 'unlisted': { icon: 'unlock', text: intl.formatMessage(messages.unlisted_short) }, + 'private': { icon: 'lock', text: intl.formatMessage(messages.private_short) }, + 'direct': { icon: 'envelope', text: intl.formatMessage(messages.direct_short) }, + }; + + const visibilityIcon = visibilityIconInfo[status.get('visibility')]; + return (
@@ -425,6 +441,7 @@ class Status extends ImmutablePureComponent {
+
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index 72d15ddf7..935e4207e 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.js @@ -6,7 +6,7 @@ import DisplayName from '../../../components/display_name'; import StatusContent from '../../../components/status_content'; import MediaGallery from '../../../components/media_gallery'; import { Link } from 'react-router-dom'; -import { FormattedDate } from 'react-intl'; +import { injectIntl, defineMessages, FormattedDate } from 'react-intl'; import Card from './card'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Video from '../../video'; @@ -16,7 +16,15 @@ import classNames from 'classnames'; import Icon from 'mastodon/components/icon'; import AnimatedNumber from 'mastodon/components/animated_number'; -export default class DetailedStatus extends ImmutablePureComponent { +const messages = defineMessages({ + public_short: { id: 'privacy.public.short', defaultMessage: 'Public' }, + unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' }, + private_short: { id: 'privacy.private.short', defaultMessage: 'Followers-only' }, + direct_short: { id: 'privacy.direct.short', defaultMessage: 'Direct' }, +}); + +export default @injectIntl +class DetailedStatus extends ImmutablePureComponent { static contextTypes = { router: PropTypes.object, @@ -92,7 +100,7 @@ export default class DetailedStatus extends ImmutablePureComponent { render () { const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status; const outerStyle = { boxSizing: 'border-box' }; - const { compact } = this.props; + const { intl, compact } = this.props; if (!status) { return null; @@ -157,34 +165,44 @@ export default class DetailedStatus extends ImmutablePureComponent { } if (status.get('application')) { - applicationLink = · {status.getIn(['application', 'name'])}; + applicationLink = · {status.getIn(['application', 'name'])}; } - if (status.get('visibility') === 'direct') { - reblogIcon = 'envelope'; - } else if (status.get('visibility') === 'private') { - reblogIcon = 'lock'; - } + const visibilityIconInfo = { + 'public': { icon: 'globe', text: intl.formatMessage(messages.public_short) }, + 'unlisted': { icon: 'unlock', text: intl.formatMessage(messages.unlisted_short) }, + 'private': { icon: 'lock', text: intl.formatMessage(messages.private_short) }, + 'direct': { icon: 'envelope', text: intl.formatMessage(messages.direct_short) }, + }; + + const visibilityIcon = visibilityIconInfo[status.get('visibility')]; + const visibilityLink = · ; if (['private', 'direct'].includes(status.get('visibility'))) { - reblogLink = ; + reblogLink = ''; } else if (this.context.router) { reblogLink = ( - - - - - - + + · + + + + + + + ); } else { reblogLink = ( - - - - - - + + · + + + + + + + ); } @@ -210,7 +228,7 @@ export default class DetailedStatus extends ImmutablePureComponent { return (
-
+
@@ -223,7 +241,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
- {applicationLink} · {reblogLink} · {favouriteLink} + {visibilityLink}{applicationLink}{reblogLink} · {favouriteLink}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 2ff9073db..e3da780ef 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1019,7 +1019,8 @@ } &.light { - .status__relative-time { + .status__relative-time, + .status__visibility-icon { color: $light-text-color; } @@ -1065,12 +1066,18 @@ } .status__relative-time, +.status__visibility-icon, .notification__relative_time { color: $dark-text-color; float: right; font-size: 14px; } +.status__visibility-icon { + margin-left: 4px; + margin-right: 4px; +} + .status__display-name { color: $dark-text-color; } diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index ecd166253..fbf26e30b 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -158,6 +158,7 @@ body.rtl { } .status__relative-time, + .status__visibility-icon, .activity-stream .status.light .status__header .status__meta { float: left; } diff --git a/app/views/statuses/_detailed_status.html.haml b/app/views/statuses/_detailed_status.html.haml index c23733053..684dd08d1 100644 --- a/app/views/statuses/_detailed_status.html.haml +++ b/app/views/statuses/_detailed_status.html.haml @@ -1,4 +1,4 @@ -.detailed-status.detailed-status--flex +.detailed-status.detailed-status--flex{ class: "detailed-status-#{status.visibility}" } .p-author.h-card = link_to ActivityPub::TagManager.instance.url_for(status.account), class: 'detailed-status__display-name u-url', target: stream_link_target, rel: 'noopener' do .detailed-status__display-avatar @@ -47,6 +47,9 @@ = link_to ActivityPub::TagManager.instance.url_for(status), class: 'detailed-status__datetime u-url u-uid', target: stream_link_target, rel: 'noopener noreferrer' do %time.formatted{ datetime: status.created_at.iso8601, title: l(status.created_at) }= l(status.created_at) · + %span.detailed-status__visibility-icon + = visibility_icon status + · - if status.application && @account.user&.setting_show_application - if status.application.website.blank? %strong.detailed-status__application= status.application.name @@ -61,18 +64,12 @@ %span.detailed-status__reblogs>= number_to_human status.replies_count, strip_insignificant_zeros: true = " " · - - if status.direct_visibility? - %span.detailed-status__link< - = fa_icon('envelope') - - elsif status.private_visibility? || status.limited_visibility? - %span.detailed-status__link< - = fa_icon('lock') - - else + - if status.public_visibility? || status.unlisted_visibility? = link_to remote_interaction_path(status, type: :reblog), class: 'modal-button detailed-status__link' do = fa_icon('retweet') %span.detailed-status__reblogs>= number_to_human status.reblogs_count, strip_insignificant_zeros: true = " " - · + · = link_to remote_interaction_path(status, type: :favourite), class: 'modal-button detailed-status__link' do = fa_icon('star') %span.detailed-status__favorites>= number_to_human status.favourites_count, strip_insignificant_zeros: true diff --git a/app/views/statuses/_simple_status.html.haml b/app/views/statuses/_simple_status.html.haml index d5950658a..06dc5ff93 100644 --- a/app/views/statuses/_simple_status.html.haml +++ b/app/views/statuses/_simple_status.html.haml @@ -1,8 +1,10 @@ -.status +.status{ class: "status-#{status.visibility}" } .status__info = link_to ActivityPub::TagManager.instance.url_for(status), class: 'status__relative-time u-url u-uid', target: stream_link_target, rel: 'noopener noreferrer' do %time.time-ago{ datetime: status.created_at.iso8601, title: l(status.created_at) }= l(status.created_at) %data.dt-published{ value: status.created_at.to_time.iso8601 } + %span.status__visibility-icon + = visibility_icon status .p-author.h-card = link_to ActivityPub::TagManager.instance.url_for(status.account), class: 'status__display-name u-url', target: stream_link_target, rel: 'noopener noreferrer' do -- cgit From f7bdfec5bba683f25dd9cf497f84d202ca5267c2 Mon Sep 17 00:00:00 2001 From: Takeshi Umeda Date: Fri, 26 Jun 2020 05:44:19 +0900 Subject: Change to correct the role of the boost button (#14132) --- .../mastodon/components/status_action_bar.js | 30 ++++++++++++---------- .../features/status/components/action_bar.js | 21 +++++++++------ 2 files changed, 29 insertions(+), 22 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js index bebbbcb5a..a4aa27088 100644 --- a/app/javascript/mastodon/components/status_action_bar.js +++ b/app/javascript/mastodon/components/status_action_bar.js @@ -237,9 +237,6 @@ class StatusActionBar extends ImmutablePureComponent { const account = status.get('account'); let menu = []; - let reblogIcon = 'retweet'; - let replyIcon; - let replyTitle; menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen }); @@ -259,10 +256,6 @@ class StatusActionBar extends ImmutablePureComponent { if (status.getIn(['account', 'id']) === me) { if (publicStatus) { menu.push({ text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin), action: this.handlePinClick }); - } else { - if (status.get('visibility') === 'private') { - menu.push({ text: intl.formatMessage(status.get('reblogged') ? messages.cancel_reblog_private : messages.reblog_private), action: this.handleReblogClick }); - } } menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick }); @@ -305,12 +298,8 @@ class StatusActionBar extends ImmutablePureComponent { } } - if (status.get('visibility') === 'direct') { - reblogIcon = 'envelope'; - } else if (status.get('visibility') === 'private') { - reblogIcon = 'lock'; - } - + let replyIcon; + let replyTitle; if (status.get('in_reply_to_id', null) === null) { replyIcon = 'reply'; replyTitle = intl.formatMessage(messages.reply); @@ -319,6 +308,19 @@ class StatusActionBar extends ImmutablePureComponent { replyTitle = intl.formatMessage(messages.replyAll); } + const reblogPrivate = status.getIn(['account', 'id']) === me && status.get('visibility') === 'private'; + + let reblogTitle = ''; + if (status.get('reblogged')) { + reblogTitle = intl.formatMessage(messages.cancel_reblog_private); + } else if (publicStatus) { + reblogTitle = intl.formatMessage(messages.reblog); + } else if (reblogPrivate) { + reblogTitle = intl.formatMessage(messages.reblog_private); + } else { + reblogTitle = intl.formatMessage(messages.cannot_reblog); + } + const shareButton = ('share' in navigator) && publicStatus && ( ); @@ -326,7 +328,7 @@ class StatusActionBar extends ImmutablePureComponent { return (
{obfuscatedCount(status.get('replies_count'))}
- + {shareButton} diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js index ba62d7b10..1c5d5ca0c 100644 --- a/app/javascript/mastodon/features/status/components/action_bar.js +++ b/app/javascript/mastodon/features/status/components/action_bar.js @@ -201,10 +201,6 @@ class ActionBar extends React.PureComponent { if (me === status.getIn(['account', 'id'])) { if (publicStatus) { menu.push({ text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin), action: this.handlePinClick }); - } else { - if (status.get('visibility') === 'private') { - menu.push({ text: intl.formatMessage(status.get('reblogged') ? messages.cancel_reblog_private : messages.reblog_private), action: this.handleReblogClick }); - } } menu.push(null); @@ -261,14 +257,23 @@ class ActionBar extends React.PureComponent { replyIcon = 'reply-all'; } - let reblogIcon = 'retweet'; - if (status.get('visibility') === 'direct') reblogIcon = 'envelope'; - else if (status.get('visibility') === 'private') reblogIcon = 'lock'; + const reblogPrivate = status.getIn(['account', 'id']) === me && status.get('visibility') === 'private'; + + let reblogTitle; + if (status.get('reblogged')) { + reblogTitle = intl.formatMessage(messages.cancel_reblog_private); + } else if (publicStatus) { + reblogTitle = intl.formatMessage(messages.reblog); + } else if (reblogPrivate) { + reblogTitle = intl.formatMessage(messages.reblog_private); + } else { + reblogTitle = intl.formatMessage(messages.cannot_reblog); + } return (
-
+
{shareButton}
-- cgit From e49bd93211586b765a6bdd8a0ccf861a8a831ea6 Mon Sep 17 00:00:00 2001 From: Mélanie Chauvel Date: Fri, 26 Jun 2020 00:14:29 +0200 Subject: Improve wording of the “Add media” button tooltip (#13954) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove (incomplete) list of supported formats - List types of media (image, video, audio) - Tell that several images could be uploaded using plural --- .../mastodon/features/compose/components/upload_button.js | 10 +++++----- app/javascript/mastodon/locales/ast.json | 2 +- app/javascript/mastodon/locales/defaultMessages.json | 2 +- app/javascript/mastodon/locales/en.json | 2 +- app/javascript/mastodon/locales/ga.json | 2 +- app/javascript/mastodon/locales/hi.json | 2 +- app/javascript/mastodon/locales/kn.json | 2 +- app/javascript/mastodon/locales/lt.json | 2 +- app/javascript/mastodon/locales/lv.json | 2 +- app/javascript/mastodon/locales/mk.json | 2 +- app/javascript/mastodon/locales/ml.json | 2 +- app/javascript/mastodon/locales/mr.json | 2 +- app/javascript/mastodon/locales/ms.json | 2 +- app/javascript/mastodon/locales/ur.json | 2 +- 14 files changed, 18 insertions(+), 18 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/features/compose/components/upload_button.js b/app/javascript/mastodon/features/compose/components/upload_button.js index d550019f4..9cb36167a 100644 --- a/app/javascript/mastodon/features/compose/components/upload_button.js +++ b/app/javascript/mastodon/features/compose/components/upload_button.js @@ -7,11 +7,9 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePropTypes from 'react-immutable-proptypes'; const messages = defineMessages({ - upload: { id: 'upload_button.label', defaultMessage: 'Add media ({formats})' }, + upload: { id: 'upload_button.label', defaultMessage: 'Add images, a video or an audio file' }, }); -const SUPPORTED_FORMATS = 'JPEG, PNG, GIF, WebM, MP4, MOV, OGG, WAV, MP3, FLAC'; - const makeMapStateToProps = () => { const mapStateToProps = state => ({ acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']), @@ -60,11 +58,13 @@ class UploadButton extends ImmutablePureComponent { return null; } + const message = intl.formatMessage(messages.upload); + return (
- +