Add media display option to Preferences

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

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>

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' />}