[feature] Always show spoiler / content-warning box

app/javascript/flavours/glitch/actions/compose.js

@@ -57,7 +57,6 @@ export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT';
 
 export const COMPOSE_ADVANCED_OPTIONS_CHANGE = 'COMPOSE_ADVANCED_OPTIONS_CHANGE';
 export const COMPOSE_SENSITIVITY_CHANGE  = 'COMPOSE_SENSITIVITY_CHANGE';
-export const COMPOSE_SPOILERNESS_CHANGE  = 'COMPOSE_SPOILERNESS_CHANGE';
 export const COMPOSE_SPOILER_TEXT_CHANGE = 'COMPOSE_SPOILER_TEXT_CHANGE';
 export const COMPOSE_VISIBILITY_CHANGE   = 'COMPOSE_VISIBILITY_CHANGE';
 export const COMPOSE_LISTABILITY_CHANGE  = 'COMPOSE_LISTABILITY_CHANGE';
@@ -745,12 +744,6 @@ export const changeComposeLanguage = language => ({
   language,
 });
 
-export function changeComposeSpoilerness() {
-  return {
-    type: COMPOSE_SPOILERNESS_CHANGE,
-  };
-}
-
 export function changeComposeSpoilerText(text) {
   return {
     type: COMPOSE_SPOILER_TEXT_CHANGE,

app/javascript/flavours/glitch/features/compose/components/compose_form.jsx

@@ -34,7 +34,7 @@ const messages = defineMessages({
     id: 'confirmations.missing_media_description.confirm',
     defaultMessage: 'Send anyway',
   },
-  spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
+  spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: '(Optional) post title / content warning' },
 });
 
 class ComposeForm extends ImmutablePureComponent {
@@ -79,7 +79,6 @@ class ComposeForm extends ImmutablePureComponent {
     spoilersAlwaysOn: PropTypes.bool,
     mediaDescriptionConfirmation: PropTypes.bool,
     preselectOnReply: PropTypes.bool,
-    onChangeSpoilerness: PropTypes.func,
     onChangeVisibility: PropTypes.func,
     onMediaDescriptionConfirm: PropTypes.func,
   };
@@ -292,7 +291,6 @@ class ComposeForm extends ImmutablePureComponent {
       intl,
       isSubmitting,
       layout,
-      onChangeSpoilerness,
       onClearSuggestions,
       onFetchSuggestions,
       onPaste,
@@ -300,10 +298,8 @@ class ComposeForm extends ImmutablePureComponent {
       sensitive,
       showSearch,
       sideArm,
-      spoiler,
       spoilerText,
       suggestions,
-      spoilersAlwaysOn,
       isEditing,
     } = this.props;
 
@@ -315,13 +311,12 @@ class ComposeForm extends ImmutablePureComponent {
 
         <ReplyIndicatorContainer />
 
-        <div className={`spoiler-input ${spoiler ? 'spoiler-input--visible' : ''}`} ref={this.setRef} aria-hidden={!this.props.spoiler}>
+        <div className={'spoiler-input spoiler-input--visible'} ref={this.setRef}>
           <AutosuggestInput
             placeholder={intl.formatMessage(messages.spoiler_placeholder)}
             value={spoilerText}
             onChange={this.handleChangeSpoiler}
             onKeyDown={this.handleKeyDown}
-            disabled={!spoiler}
             ref={this.handleRefSpoilerText}
             suggestions={suggestions}
             onSuggestionsFetchRequested={onFetchSuggestions}
@@ -364,11 +359,9 @@ class ComposeForm extends ImmutablePureComponent {
           <OptionsContainer
             advancedOptions={advancedOptions}
             disabled={isSubmitting}
-            onToggleSpoiler={spoilersAlwaysOn ? null : onChangeSpoilerness}
             onUpload={onPaste}
             isEditing={isEditing}
-            sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)}
+            sensitive={sensitive || (spoilerText && spoilerText.length > 0)}
-            spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler}
           />
           <div className='character-counter__wrapper'>
             <CharacterCounter text={countText} max={maxChars} />

app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js

@@ -5,7 +5,6 @@ import { connect } from 'react-redux';
 import {
   changeCompose,
   changeComposeSpoilerText,
-  changeComposeSpoilerness,
   changeComposeVisibility,
   clearComposeSuggestions,
   fetchComposeSuggestions,
@@ -117,10 +116,6 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     dispatch(insertEmojiCompose(position, emoji));
   },
 
-  onChangeSpoilerness() {
-    dispatch(changeComposeSpoilerness());
-  },
-
   onChangeVisibility(value) {
     dispatch(changeComposeVisibility(value));
   },

app/javascript/flavours/glitch/features/ui/index.jsx

@@ -13,7 +13,7 @@ import { debounce } from 'lodash';
 import { HotKeys } from 'react-hotkeys';
 
 import { changeLayout } from 'flavours/glitch/actions/app';
-import { uploadCompose, resetCompose, changeComposeSpoilerness } from 'flavours/glitch/actions/compose';
+import { uploadCompose, resetCompose } from 'flavours/glitch/actions/compose';
 import { clearHeight } from 'flavours/glitch/actions/height_cache';
 import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'flavours/glitch/actions/markers';
 import { expandNotifications, notificationsSetVisibility } from 'flavours/glitch/actions/notifications';
@@ -518,11 +518,6 @@ class UI extends Component {
     this.props.dispatch(resetCompose());
   };
 
-  handleHotkeyToggleComposeSpoilers = e => {
-    e.preventDefault();
-    this.props.dispatch(changeComposeSpoilerness());
-  };
-
   handleHotkeyFocusColumn = e => {
     const index  = (e.key * 1) + 1; // First child is drawer, skip that
     const column = this.node.querySelector(`.column:nth-child(${index})`);

app/javascript/flavours/glitch/reducers/compose.js

@@ -30,7 +30,6 @@ import {
   COMPOSE_TAG_HISTORY_UPDATE,
   COMPOSE_ADVANCED_OPTIONS_CHANGE,
   COMPOSE_SENSITIVITY_CHANGE,
-  COMPOSE_SPOILERNESS_CHANGE,
   COMPOSE_SPOILER_TEXT_CHANGE,
   COMPOSE_VISIBILITY_CHANGE,
   COMPOSE_LANGUAGE_CHANGE,
@@ -383,15 +382,6 @@ export default function compose(state = initialState, action) {
 
       map.set('idempotencyKey', uuid());
     });
-  case COMPOSE_SPOILERNESS_CHANGE:
-    return state.withMutations(map => {
-      map.set('spoiler', !state.get('spoiler'));
-      map.set('idempotencyKey', uuid());
-
-      if (!state.get('sensitive') && state.get('media_attachments').size >= 1) {
-        map.set('sensitive', true);
-      }
-    });
   case COMPOSE_SPOILER_TEXT_CHANGE:
     return state
       .set('spoiler_text', action.text)

app/javascript/mastodon/actions/compose.js

@@ -52,7 +52,6 @@ export const COMPOSE_MOUNT   = 'COMPOSE_MOUNT';
 export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT';
 
 export const COMPOSE_SENSITIVITY_CHANGE  = 'COMPOSE_SENSITIVITY_CHANGE';
-export const COMPOSE_SPOILERNESS_CHANGE  = 'COMPOSE_SPOILERNESS_CHANGE';
 export const COMPOSE_SPOILER_TEXT_CHANGE = 'COMPOSE_SPOILER_TEXT_CHANGE';
 export const COMPOSE_VISIBILITY_CHANGE   = 'COMPOSE_VISIBILITY_CHANGE';
 export const COMPOSE_COMPOSING_CHANGE    = 'COMPOSE_COMPOSING_CHANGE';
@@ -733,12 +732,6 @@ export const changeComposeLanguage = language => ({
   language,
 });
 
-export function changeComposeSpoilerness() {
-  return {
-    type: COMPOSE_SPOILERNESS_CHANGE,
-  };
-}
-
 export function changeComposeSpoilerText(text) {
   return {
     type: COMPOSE_SPOILER_TEXT_CHANGE,

app/javascript/mastodon/features/compose/components/compose_form.jsx

@@ -21,7 +21,6 @@ import PollButtonContainer from '../containers/poll_button_container';
 import PollFormContainer from '../containers/poll_form_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
 import ReplyIndicatorContainer from '../containers/reply_indicator_container';
-import SpoilerButtonContainer from '../containers/spoiler_button_container';
 import UploadButtonContainer from '../containers/upload_button_container';
 import UploadFormContainer from '../containers/upload_form_container';
 import WarningContainer from '../containers/warning_container';
@@ -33,7 +32,7 @@ const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u20
 
 const messages = defineMessages({
   placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
-  spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
+  spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: '(Optional) post title / content warning' },
   publish: { id: 'compose_form.publish', defaultMessage: 'Promulgate' },
   publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}!' },
   saveChanges: { id: 'compose_form.save_changes', defaultMessage: 'Save changes' },
@@ -49,7 +48,6 @@ class ComposeForm extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
     text: PropTypes.string.isRequired,
     suggestions: ImmutablePropTypes.list,
-    spoiler: PropTypes.bool,
     privacy: PropTypes.string,
     spoilerText: PropTypes.string,
     focusDate: PropTypes.instanceOf(Date),
@@ -244,13 +242,12 @@ class ComposeForm extends ImmutablePureComponent {
 
         <ReplyIndicatorContainer />
 
-        <div className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`} ref={this.setRef} aria-hidden={!this.props.spoiler}>
+        <div className={'spoiler-input spoiler-input--visible'} ref={this.setRef}>
           <AutosuggestInput
             placeholder={intl.formatMessage(messages.spoiler_placeholder)}
             value={this.props.spoilerText}
             onChange={this.handleChangeSpoilerText}
             onKeyDown={this.handleKeyDown}
-            disabled={!this.props.spoiler}
             ref={this.setSpoilerText}
             suggestions={this.props.suggestions}
             onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
@@ -293,7 +290,6 @@ class ComposeForm extends ImmutablePureComponent {
               <UploadButtonContainer />
               <PollButtonContainer />
               <PrivacyDropdownContainer disabled={this.props.isEditing} />
-              <SpoilerButtonContainer />
               <LanguageDropdown />
             </div>
 

app/javascript/mastodon/features/compose/containers/compose_form_container.js

@@ -15,7 +15,6 @@ import ComposeForm from '../components/compose_form';
 const mapStateToProps = state => ({
   text: state.getIn(['compose', 'text']),
   suggestions: state.getIn(['compose', 'suggestions']),
-  spoiler: state.getIn(['compose', 'spoiler']),
   spoilerText: state.getIn(['compose', 'spoiler_text']),
   privacy: state.getIn(['compose', 'privacy']),
   focusDate: state.getIn(['compose', 'focusDate']),

app/javascript/mastodon/features/compose/containers/spoiler_button_container.js

@@ -1,28 +0,0 @@
-import { injectIntl, defineMessages } from 'react-intl';
-
-import { connect } from 'react-redux';
-
-import { changeComposeSpoilerness } from '../../../actions/compose';
-import TextIconButton from '../components/text_icon_button';
-
-const messages = defineMessages({
-  marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
-  unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
-});
-
-const mapStateToProps = (state, { intl }) => ({
-  label: 'CW',
-  title: intl.formatMessage(state.getIn(['compose', 'spoiler']) ? messages.marked : messages.unmarked),
-  active: state.getIn(['compose', 'spoiler']),
-  ariaControls: 'cw-spoiler-input',
-});
-
-const mapDispatchToProps = dispatch => ({
-
-  onClick () {
-    dispatch(changeComposeSpoilerness());
-  },
-
-});
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TextIconButton));

app/javascript/mastodon/features/ui/index.jsx

@@ -17,7 +17,7 @@ import { INTRODUCTION_VERSION } from 'mastodon/actions/onboarding';
 import PictureInPicture from 'mastodon/features/picture_in_picture';
 import { layoutFromWindow } from 'mastodon/is_mobile';
 
-import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../actions/compose';
+import { uploadCompose, resetCompose } from '../../actions/compose';
 import { clearHeight } from '../../actions/height_cache';
 import { expandNotifications } from '../../actions/notifications';
 import { fetchServer } from '../../actions/server';
@@ -455,11 +455,6 @@ class UI extends PureComponent {
     this.props.dispatch(resetCompose());
   };
 
-  handleHotkeyToggleComposeSpoilers = e => {
-    e.preventDefault();
-    this.props.dispatch(changeComposeSpoilerness());
-  };
-
   handleHotkeyFocusColumn = e => {
     const index  = (e.key * 1) + 1; // First child is drawer, skip that
     const column = this.node.querySelector(`.column:nth-child(${index})`);

app/javascript/mastodon/locales/en-GB.json

@@ -159,7 +159,7 @@
   "compose_form.sensitive.unmarked": "{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}",
   "compose_form.spoiler.marked": "Remove content warning",
   "compose_form.spoiler.unmarked": "Add content warning",
-  "compose_form.spoiler_placeholder": "Write your warning here",
+  "compose_form.spoiler_placeholder": "(Optional) post title / content warning",
   "confirmation_modal.cancel": "Cancel",
   "confirmations.block.block_and_report": "Block & Report",
   "confirmations.block.confirm": "Block",

app/javascript/mastodon/locales/en.json

@@ -159,7 +159,7 @@
   "compose_form.sensitive.unmarked": "{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}",
   "compose_form.spoiler.marked": "Remove content warning",
   "compose_form.spoiler.unmarked": "Add content warning",
-  "compose_form.spoiler_placeholder": "Write your warning here",
+  "compose_form.spoiler_placeholder": "(Optional) post title / content warning",
   "confirmation_modal.cancel": "Cancel",
   "confirmations.block.block_and_report": "Block & Report",
   "confirmations.block.confirm": "Block",

app/javascript/mastodon/reducers/compose.js

@@ -28,7 +28,6 @@ import {
   COMPOSE_SUGGESTION_TAGS_UPDATE,
   COMPOSE_TAG_HISTORY_UPDATE,
   COMPOSE_SENSITIVITY_CHANGE,
-  COMPOSE_SPOILERNESS_CHANGE,
   COMPOSE_SPOILER_TEXT_CHANGE,
   COMPOSE_VISIBILITY_CHANGE,
   COMPOSE_LANGUAGE_CHANGE,
@@ -300,15 +299,6 @@ export default function compose(state = initialState, action) {
 
       map.set('idempotencyKey', uuid());
     });
-  case COMPOSE_SPOILERNESS_CHANGE:
-    return state.withMutations(map => {
-      map.set('spoiler', !state.get('spoiler'));
-      map.set('idempotencyKey', uuid());
-
-      if (!state.get('sensitive') && state.get('media_attachments').size >= 1) {
-        map.set('sensitive', true);
-      }
-    });
   case COMPOSE_SPOILER_TEXT_CHANGE:
     if (!state.get('spoiler')) return state;
     return state