From 3b96141633421a0f80e8fb89cfeff549c9c3a3d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A9lanie=20Chauvel?= <perso@hack-libre.org>
Date: Tue, 27 Oct 2020 03:05:50 +0100
Subject: [PATCH] =?UTF-8?q?[Glitch]=20Make=20=E2=80=9CMark=20media=20as=20?=
 =?UTF-8?q?sensitive=E2=80=9D=20properly=20translatable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Port c5704e75ae1f64742d59747fd931ffcca7a4887d to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
---
 .../containers/sensitive_button_container.js  | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/compose/containers/sensitive_button_container.js b/app/javascript/flavours/glitch/features/compose/containers/sensitive_button_container.js
index fa1ae8821..9c23d3f47 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/sensitive_button_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/sensitive_button_container.js
@@ -6,8 +6,14 @@ import { changeComposeSensitivity } from 'flavours/glitch/actions/compose';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 const messages = defineMessages({
-  marked: { id: 'compose_form.sensitive.marked', defaultMessage: 'Media is marked as sensitive' },
-  unmarked: { id: 'compose_form.sensitive.unmarked', defaultMessage: 'Media is not marked as sensitive' },
+  marked: {
+    id: 'compose_form.sensitive.marked',
+    defaultMessage: '{count, plural, one {Media is marked as sensitive} other {Media is marked as sensitive}}',
+  },
+  unmarked: {
+    id: 'compose_form.sensitive.unmarked',
+    defaultMessage: '{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}',
+  },
 });
 
 const mapStateToProps = state => {
@@ -16,6 +22,7 @@ const mapStateToProps = state => {
   return {
     active: state.getIn(['compose', 'sensitive']) || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0),
     disabled: state.getIn(['compose', 'spoiler']),
+    mediaCount: state.getIn(['compose', 'media_attachments']).size,
   };
 };
 
@@ -32,16 +39,17 @@ class SensitiveButton extends React.PureComponent {
   static propTypes = {
     active: PropTypes.bool,
     disabled: PropTypes.bool,
+    mediaCount: PropTypes.number,
     onClick: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
   };
 
   render () {
-    const { active, disabled, onClick, intl } = this.props;
+    const { active, disabled, mediaCount, onClick, intl } = this.props;
 
     return (
       <div className='compose-form__sensitive-button'>
-        <label className={classNames('icon-button', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}>
+        <label className={classNames('icon-button', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked, { count: mediaCount })}>
           <input
             name='mark-sensitive'
             type='checkbox'
@@ -52,7 +60,11 @@ class SensitiveButton extends React.PureComponent {
 
           <span className={classNames('checkbox', { active })} />
 
-          <FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />
+          <FormattedMessage
+            id='compose_form.sensitive.hide'
+            defaultMessage='{count, plural, one {Mark media as sensitive} other {Mark media as sensitive}}'
+            values={{ count: mediaCount }}
+          />
         </label>
       </div>
     );