Pull displayMedia from Redux store

app/soapbox/actions/settings.js

@@ -14,7 +14,7 @@ const defaultSettings = ImmutableMap({
   skinTone: 1,
   reduceMotion: false,
   autoPlayGif: true,
-  displayMedia: true,
+  displayMedia: 'default',
   expandSpoilers: false,
   unfollowModal: false,
   boostModal: false,

app/soapbox/components/media_gallery.js

@@ -7,7 +7,6 @@ import IconButton from './icon_button';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { isIOS } from '../is_mobile';
 import classNames from 'classnames';
-import { displayMedia } from '../initial_state';
 import { decode } from 'blurhash';
 import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
 import { Map as ImmutableMap } from 'immutable';
@@ -17,11 +16,11 @@ const messages = defineMessages({
   toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
 });
 
-const mapStateToProps = state => ({
+const mapStateToItemProps = state => ({
   autoPlayGif: getSettings(state).get('autoPlayGif'),
 });
 
-@connect(mapStateToProps)
+@connect(mapStateToItemProps)
 class Item extends React.PureComponent {
 
   static propTypes = {
@@ -238,7 +237,12 @@ class Item extends React.PureComponent {
 
 }
 
-export default @injectIntl
+const mapStateToMediaGalleryProps = state => ({
+  displayMedia: getSettings(state).get('displayMedia'),
+});
+
+export default @connect(mapStateToMediaGalleryProps)
+@injectIntl
 class MediaGallery extends React.PureComponent {
 
   static propTypes = {
@@ -253,6 +257,7 @@ class MediaGallery extends React.PureComponent {
     cacheWidth: PropTypes.func,
     visible: PropTypes.bool,
     onToggleVisibility: PropTypes.func,
+    displayMedia: PropTypes.string,
   };
 
   static defaultProps = {
@@ -260,11 +265,12 @@ class MediaGallery extends React.PureComponent {
   };
 
   state = {
-    visible: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
+    visible: this.props.visible !== undefined ? this.props.visible : (this.props.displayMedia !== 'hide_all' && !this.props.sensitive || this.props.displayMedia === 'show_all'),
     width: this.props.defaultWidth,
   };
 
   componentWillReceiveProps(nextProps) {
+    const { displayMedia } = this.props;
     if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) {
       this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
     } else if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {

app/soapbox/components/status.js

@@ -17,7 +17,6 @@ import { HotKeys } from 'react-hotkeys';
 import classNames from 'classnames';
 import Icon from 'soapbox/components/icon';
 import PollContainer from 'soapbox/containers/poll_container';
-import { displayMedia } from '../initial_state';
 import { NavLink } from 'react-router-dom';
 
 // We use the component (and not the container) since we do not want
@@ -41,7 +40,7 @@ export const textForScreenReader = (intl, status, rebloggedByText = false) => {
   return values.join(', ');
 };
 
-export const defaultMediaVisibility = (status) => {
+export const defaultMediaVisibility = (status, displayMedia) => {
   if (!status) {
     return undefined;
   }
@@ -89,6 +88,7 @@ class Status extends ImmutablePureComponent {
     cacheMediaWidth: PropTypes.func,
     cachedMediaWidth: PropTypes.number,
     group: ImmutablePropTypes.map,
+    displayMedia: PropTypes.string,
   };
 
   // Avoid checking props that are functions (and whose equality will always
@@ -101,7 +101,7 @@ class Status extends ImmutablePureComponent {
   ];
 
   state = {
-    showMedia: defaultMediaVisibility(this.props.status),
+    showMedia: defaultMediaVisibility(this.props.status, this.props.displayMedia),
     statusId: undefined,
   };
 

app/soapbox/containers/status_container.js

@@ -50,6 +50,7 @@ const makeMapStateToProps = () => {
 
   const mapStateToProps = (state, props) => ({
     status: getStatus(state, props),
+    displayMedia: getSettings(state).get('displayMedia'),
   });
 
   return mapStateToProps;

app/soapbox/features/account_gallery/components/media_item.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Icon from 'soapbox/components/icon';
-import { displayMedia } from 'soapbox/initial_state';
 import classNames from 'classnames';
 import { decode } from 'blurhash';
 import { isIOS } from 'soapbox/is_mobile';
@@ -12,6 +11,7 @@ import { getSettings } from 'soapbox/actions/settings';
 
 const mapStateToProps = state => ({
   autoPlayGif: getSettings(state).get('autoPlayGif'),
+  displayMedia: getSettings(state).get('displayMedia'),
 });
 
 export default @connect(mapStateToProps)
@@ -22,10 +22,11 @@ class MediaItem extends ImmutablePureComponent {
     displayWidth: PropTypes.number.isRequired,
     onOpenMedia: PropTypes.func.isRequired,
     autoPlayGif: PropTypes.bool,
+    displayMedia: PropTypes.string,
   };
 
   state = {
-    visible: displayMedia !== 'hide_all' && !this.props.attachment.getIn(['status', 'sensitive']) || displayMedia === 'show_all',
+    visible: this.props.displayMedia !== 'hide_all' && !this.props.attachment.getIn(['status', 'sensitive']) || this.props.displayMedia === 'show_all',
     loaded: false,
   };
 

app/soapbox/features/video/index.js

@@ -1,14 +1,15 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { fromJS, is } from 'immutable';
 import { throttle } from 'lodash';
 import classNames from 'classnames';
 import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
-import { displayMedia } from '../../initial_state';
 import Icon from 'soapbox/components/icon';
 import { decode } from 'blurhash';
 import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio';
+import { getSettings } from 'soapbox/actions/settings';
 
 const messages = defineMessages({
   play: { id: 'video.play', defaultMessage: 'Play' },
@@ -87,7 +88,12 @@ export const getPointerPosition = (el, event) => {
   return position;
 };
 
-export default @injectIntl
+const mapStateToProps = state => ({
+  displayMedia: getSettings(state).get('displayMedia'),
+});
+
+export default @connect(mapStateToProps)
+@injectIntl
 class Video extends React.PureComponent {
 
   static propTypes = {
@@ -109,6 +115,7 @@ class Video extends React.PureComponent {
     blurhash: PropTypes.string,
     link: PropTypes.node,
     aspectRatio: PropTypes.number,
+    displayMedia: PropTypes.string,
   };
 
   state = {
@@ -121,7 +128,7 @@ class Video extends React.PureComponent {
     fullscreen: false,
     hovered: false,
     muted: false,
-    revealed: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
+    revealed: this.props.visible !== undefined ? this.props.visible : (this.props.displayMedia !== 'hide_all' && !this.props.sensitive || this.props.displayMedia === 'show_all'),
   };
 
   // hard coded in components.scss

docs/store.md

@@ -363,7 +363,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
     ```
     settings: {
      autoPlayGif: true,
-     displayMedia: true,
+     displayMedia: 'default',
      deleteModal: true,
      unfollowModal: false,
      frequentlyUsedEmojis: {