From b8f88f807bd85a8ed28a814ae959cf8a66748249 Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Wed, 28 Oct 2020 10:52:42 -0600
Subject: [PATCH] Add media display option to Preferences

---
 .../__tests__/__snapshots__/forms-test.js.snap |  2 +-
 app/soapbox/features/forms/index.js            |  2 +-
 app/soapbox/features/preferences/index.js      | 18 ++++++++++++++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/forms/__tests__/__snapshots__/forms-test.js.snap b/app/soapbox/features/forms/__tests__/__snapshots__/forms-test.js.snap
index 1bd05c5fd..a1ad8c210 100644
--- a/app/soapbox/features/forms/__tests__/__snapshots__/forms-test.js.snap
+++ b/app/soapbox/features/forms/__tests__/__snapshots__/forms-test.js.snap
@@ -56,7 +56,7 @@ exports[`<RadioGroup /> renders correctly 1`] = `
 
 exports[`<SelectDropdown /> renders correctly 1`] = `
 <div
-  class="select-wrapper"
+  className="select-wrapper"
 >
   <select>
     <option
diff --git a/app/soapbox/features/forms/index.js b/app/soapbox/features/forms/index.js
index edd4b1ab0..d73e428dc 100644
--- a/app/soapbox/features/forms/index.js
+++ b/app/soapbox/features/forms/index.js
@@ -236,7 +236,7 @@ export class SelectDropdown extends ImmutablePureComponent {
       <option key={item} value={item}>{items[item]}</option>
     ));
 
-    const selectElem = <div class='select-wrapper'><select {...props}>{optionElems}</select></div>;
+    const selectElem = <div className='select-wrapper'><select {...props}>{optionElems}</select></div>;
 
     return label ? (
       <LabelInputContainer label={label} hint={hint}>{selectElem}</LabelInputContainer>
diff --git a/app/soapbox/features/preferences/index.js b/app/soapbox/features/preferences/index.js
index 9a517acd7..f42577674 100644
--- a/app/soapbox/features/preferences/index.js
+++ b/app/soapbox/features/preferences/index.js
@@ -79,6 +79,9 @@ const languages = {
 
 const messages = defineMessages({
   heading: { id: 'column.preferences', defaultMessage: 'Preferences' },
+  display_media_default: { id: 'preferences.fields.display_media.default', defaultMessage: 'Hide media marked as sensitive' },
+  display_media_hide_all: { id: 'preferences.fields.display_media.hide_all', defaultMessage: 'Always hide media' },
+  display_media_show_all: { id: 'preferences.fields.display_media.show_all', defaultMessage: 'Always show media' },
 });
 
 const mapStateToProps = state => ({
@@ -109,6 +112,12 @@ class Preferences extends ImmutablePureComponent {
   render() {
     const { settings, intl } = this.props;
 
+    const displayMediaOptions = {
+      default: intl.formatMessage(messages.display_media_default),
+      hide_all: intl.formatMessage(messages.display_media_hide_all),
+      show_all: intl.formatMessage(messages.display_media_show_all),
+    };
+
     return (
       <Column icon='cog' heading={intl.formatMessage(messages.heading)} backBtnSlim>
         <SimpleForm>
@@ -121,6 +130,15 @@ class Preferences extends ImmutablePureComponent {
             />
           </FieldsGroup>
 
+          <FieldsGroup>
+            <SelectDropdown
+              label={<FormattedMessage id='preferences.fields.media_display_label' defaultMessage='Media display' />}
+              items={displayMediaOptions}
+              defaultValue={settings.get('displayMedia')}
+              onChange={this.onSelectChange(['displayMedia'])}
+            />
+          </FieldsGroup>
+
           <FieldsGroup>
             <RadioGroup
               label={<FormattedMessage id='preferences.fields.privacy_label' defaultMessage='Post privacy' />}