Pull autoPlayGif from Redux

app/gabsocial/components/avatar.js

@@ -1,9 +1,14 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { autoPlayGif } from '../initial_state';
 
-export default class Avatar extends React.PureComponent {
+const mapStateToProps = state => ({
+  animate: state.getIn(['preferences', 'auto_play_gif']),
+});
+
+export default @connect(mapStateToProps)
+class Avatar extends React.PureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map,
@@ -14,7 +19,6 @@ export default class Avatar extends React.PureComponent {
   };
 
   static defaultProps = {
-    animate: autoPlayGif,
     inline: false,
   };
 

app/gabsocial/components/avatar_composite.js

@@ -1,9 +1,14 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { autoPlayGif } from '../initial_state';
 
-export default class AvatarComposite extends React.PureComponent {
+const mapStateToProps = state => ({
+  animate: state.getIn(['preferences', 'auto_play_gif']),
+});
+
+export default @connect(mapStateToProps)
+class AvatarComposite extends React.PureComponent {
 
   static propTypes = {
     accounts: ImmutablePropTypes.list.isRequired,
@@ -11,10 +16,6 @@ export default class AvatarComposite extends React.PureComponent {
     size: PropTypes.number.isRequired,
   };
 
-  static defaultProps = {
-    animate: autoPlayGif,
-  };
-
   renderItem(account, size, index) {
     const { animate } = this.props;
 

app/gabsocial/components/avatar_overlay.js

@@ -1,9 +1,14 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { autoPlayGif } from '../initial_state';
 
-export default class AvatarOverlay extends React.PureComponent {
+const mapStateToProps = state => ({
+  animate: state.getIn(['preferences', 'auto_play_gif']),
+});
+
+export default @connect(mapStateToProps)
+class AvatarOverlay extends React.PureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map.isRequired,
@@ -11,10 +16,6 @@ export default class AvatarOverlay extends React.PureComponent {
     animate: PropTypes.bool,
   };
 
-  static defaultProps = {
-    animate: autoPlayGif,
-  };
-
   render() {
     const { account, friend, animate } = this.props;
 

app/gabsocial/components/media_gallery.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { is } from 'immutable';
@@ -6,7 +7,7 @@ import IconButton from './icon_button';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { isIOS } from '../is_mobile';
 import classNames from 'classnames';
-import { autoPlayGif, displayMedia } from '../initial_state';
+import { displayMedia } from '../initial_state';
 import { decode } from 'blurhash';
 import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
 
@@ -14,6 +15,11 @@ const messages = defineMessages({
   toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
 });
 
+const mapStateToProps = state => ({
+  autoPlayGif: state.getIn(['preferences', 'auto_play_gif']),
+});
+
+@connect(mapStateToProps)
 class Item extends React.PureComponent {
 
   static propTypes = {
@@ -25,6 +31,7 @@ class Item extends React.PureComponent {
     displayWidth: PropTypes.number,
     visible: PropTypes.bool.isRequired,
     dimensions: PropTypes.object,
+    autoPlayGif: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -51,7 +58,7 @@ class Item extends React.PureComponent {
   }
 
   hoverToPlay() {
-    const { attachment } = this.props;
+    const { attachment, autoPlayGif } = this.props;
     return !autoPlayGif && attachment.get('type') === 'gifv';
   }
 
@@ -108,7 +115,7 @@ class Item extends React.PureComponent {
   }
 
   render() {
-    const { attachment, standalone, displayWidth, visible, dimensions } = this.props;
+    const { attachment, standalone, displayWidth, visible, dimensions, autoPlayGif } = this.props;
 
     let width  = 100;
     let height = '100%';

app/gabsocial/features/account/components/header.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import Button from 'gabsocial/components/button';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { autoPlayGif, isStaff } from 'gabsocial/initial_state';
+import { isStaff } from 'gabsocial/initial_state';
 import classNames from 'classnames';
 import Avatar from 'gabsocial/components/avatar';
 import { shortNumberFormat } from 'gabsocial/utils/numbers';
@@ -50,6 +50,7 @@ const messages = defineMessages({
 const mapStateToProps = state => {
   return {
     me: state.get('me'),
+    autoPlayGif: state.getIn(['preferences', 'auto_play_gif']),
   };
 };
 
@@ -65,6 +66,7 @@ class Header extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
     domain: PropTypes.string.isRequired,
     username: PropTypes.string,
+    autoPlayGif: PropTypes.bool,
   };
 
   state = {
@@ -214,7 +216,7 @@ class Header extends ImmutablePureComponent {
   };
 
   render() {
-    const { account, intl, username, me } = this.props;
+    const { account, intl, username, me, autoPlayGif } = this.props;
     const { isSmallScreen } = this.state;
 
     if (!account) {

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

@@ -1,19 +1,26 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Icon from 'gabsocial/components/icon';
-import { autoPlayGif, displayMedia } from 'gabsocial/initial_state';
+import { displayMedia } from 'gabsocial/initial_state';
 import classNames from 'classnames';
 import { decode } from 'blurhash';
 import { isIOS } from 'gabsocial/is_mobile';
 
-export default class MediaItem extends ImmutablePureComponent {
+const mapStateToProps = state => ({
+  autoPlayGif: state.getIn(['preferences', 'auto_play_gif']),
+});
+
+export default @connect(mapStateToProps)
+class MediaItem extends ImmutablePureComponent {
 
   static propTypes = {
     attachment: ImmutablePropTypes.map.isRequired,
     displayWidth: PropTypes.number.isRequired,
     onOpenMedia: PropTypes.func.isRequired,
+    autoPlayGif: PropTypes.bool,
   };
 
   state = {
@@ -66,7 +73,8 @@ export default class MediaItem extends ImmutablePureComponent {
     }
   }
 
-  hoverToPlay() {
+  hoverToPlay = () => {
+    const { autoPlayGif } = this.props;
     return !autoPlayGif && ['gifv', 'video'].indexOf(this.props.attachment.get('type')) !== -1;
   }
 
@@ -83,7 +91,7 @@ export default class MediaItem extends ImmutablePureComponent {
   }
 
   render() {
-    const { attachment, displayWidth } = this.props;
+    const { attachment, displayWidth, autoPlayGif } = this.props;
     const { visible, loaded } = this.state;
 
     const width  = `${Math.floor((displayWidth - 4) / 3) - 4}px`;

app/gabsocial/features/emoji/emoji.js

@@ -1,4 +1,3 @@
-import { autoPlayGif } from '../../initial_state';
 import unicodeMapping from './emoji_unicode_mapping_light';
 import Trie from 'substring-trie';
 
@@ -6,7 +5,7 @@ const trie = new Trie(Object.keys(unicodeMapping));
 
 const assetHost = process.env.CDN_HOST || '';
 
-const emojify = (str, customEmojis = {}) => {
+const emojify = (str, customEmojis = {}, autoplay = false) => {
   const tagCharsWithoutEmojis = '<&';
   const tagCharsWithEmojis = Object.keys(customEmojis).length ? '<&:' : '<&';
   let rtn = '', tagChars = tagCharsWithEmojis, invisible = 0;
@@ -28,7 +27,7 @@ const emojify = (str, customEmojis = {}) => {
         // now got a replacee as ':shortname:'
         // if you want additional emoji handler, add statements below which set replacement and return true.
         if (shortname in customEmojis) {
-          const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url;
+          const filename = autoplay ? customEmojis[shortname].url : customEmojis[shortname].static_url;
           replacement = `<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${filename}" />`;
           return true;
         }
@@ -75,12 +74,12 @@ const emojify = (str, customEmojis = {}) => {
 
 export default emojify;
 
-export const buildCustomEmojis = (customEmojis) => {
+export const buildCustomEmojis = (customEmojis, autoplay = false) => {
   const emojis = [];
 
   customEmojis.forEach(emoji => {
     const shortcode = emoji.get('shortcode');
-    const url       = autoPlayGif ? emoji.get('url') : emoji.get('static_url');
+    const url       = autoplay ? emoji.get('url') : emoji.get('static_url');
     const name      = shortcode.replace(':', '');
 
     emojis.push({

app/gabsocial/features/ui/components/user_panel.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import { autoPlayGif } from '../../../initial_state';
 import { makeGetAccount } from '../../../selectors';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -20,7 +19,7 @@ class UserPanel extends ImmutablePureComponent {
   }
 
   render() {
-    const { account, intl, domain } = this.props;
+    const { account, intl, domain, autoPlayGif } = this.props;
     if (!account) return null;
     const displayNameHtml = { __html: account.get('display_name_html') };
     const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
@@ -91,11 +90,11 @@ const mapStateToProps = state => {
 
   return {
     account: getAccount(state, me),
+    autoPlayGif: state.getIn(['preferences', 'auto_play_gif']),
   };
 };
 
 export default injectIntl(
   connect(mapStateToProps, null, null, {
     forwardRef: true,
-  }
-  )(UserPanel));
+  })(UserPanel));

app/gabsocial/initial_state.js

@@ -6,7 +6,6 @@ const initialState = element && JSON.parse(element.textContent);
 const getMeta = (prop) => initialState && initialState.meta && initialState.meta[prop];
 
 export const reduceMotion = getMeta('reduce_motion');
-export const autoPlayGif = getMeta('auto_play_gif');
 export const displayMedia = getMeta('display_media');
 export const unfollowModal = getMeta('unfollow_modal');
 export const boostModal = getMeta('boost_modal');

app/gabsocial/reducers/preferences.js

@@ -17,6 +17,7 @@ const initialState = ImmutableMap({
       spoilers: false,
     }),
   }),
+  auto_play_gif: false,
 });
 
 export function mastoPrefsToMap(prefs) {