Refactor initial state: reduce_motion and auto_play_gif (#5501)

app/javascript/mastodon/features/account/components/header.js

@@ -5,8 +5,8 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import IconButton from '../../../components/icon_button';
 import Motion from '../../ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
-import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import { autoPlayGif } from '../../../initial_state';
 
 const messages = defineMessages({
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
@@ -14,19 +14,10 @@ const messages = defineMessages({
   requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
 });
 
-const makeMapStateToProps = () => {
-  const mapStateToProps = state => ({
-    autoPlayGif: state.getIn(['meta', 'auto_play_gif']),
-  });
-
-  return mapStateToProps;
-};
-
 class Avatar extends ImmutablePureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map.isRequired,
-    autoPlayGif: PropTypes.bool.isRequired,
   };
 
   state = {
@@ -44,7 +35,7 @@ class Avatar extends ImmutablePureComponent {
   }
 
   render () {
-    const { account, autoPlayGif }   = this.props;
+    const { account }   = this.props;
     const { isHovered } = this.state;
 
     return (
@@ -71,7 +62,6 @@ class Avatar extends ImmutablePureComponent {
 
 }
 
-@connect(makeMapStateToProps)
 @injectIntl
 export default class Header extends ImmutablePureComponent {
 
@@ -80,7 +70,6 @@ export default class Header extends ImmutablePureComponent {
     me: PropTypes.string.isRequired,
     onFollow: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
-    autoPlayGif: PropTypes.bool.isRequired,
   };
 
   render () {
@@ -124,7 +113,7 @@ export default class Header extends ImmutablePureComponent {
     return (
       <div className='account__header' style={{ backgroundImage: `url(${account.get('header')})` }}>
         <div>
-          <Avatar account={account} autoPlayGif={this.props.autoPlayGif} />
+          <Avatar account={account} />
 
           <span className='account__header__display-name' dangerouslySetInnerHTML={displayNameHtml} />
           <span className='account__header__username'>@{account.get('acct')} {lockedIcon}</span>

app/javascript/mastodon/features/account_gallery/index.js

@@ -19,7 +19,6 @@ const mapStateToProps = (state, props) => ({
   medias: getAccountGallery(state, props.params.accountId),
   isLoading: state.getIn(['timelines', `account:${props.params.accountId}:media`, 'isLoading']),
   hasMore: !!state.getIn(['timelines', `account:${props.params.accountId}:media`, 'next']),
-  autoPlayGif: state.getIn(['meta', 'auto_play_gif']),
 });
 
 @connect(mapStateToProps)
@@ -31,7 +30,6 @@ export default class AccountGallery extends ImmutablePureComponent {
     medias: ImmutablePropTypes.list.isRequired,
     isLoading: PropTypes.bool,
     hasMore: PropTypes.bool,
-    autoPlayGif: PropTypes.bool,
   };
 
   componentDidMount () {
@@ -67,7 +65,7 @@ export default class AccountGallery extends ImmutablePureComponent {
   }
 
   render () {
-    const { medias, autoPlayGif, isLoading, hasMore } = this.props;
+    const { medias, isLoading, hasMore } = this.props;
 
     let loadMore = null;
 
@@ -100,7 +98,6 @@ export default class AccountGallery extends ImmutablePureComponent {
                 <MediaItem
                   key={media.get('id')}
                   media={media}
-                  autoPlayGif={autoPlayGif}
                 />
               )}
               {loadMore}

app/javascript/mastodon/features/status/components/detailed_status.js

@@ -22,7 +22,6 @@ export default class DetailedStatus extends ImmutablePureComponent {
     status: ImmutablePropTypes.map.isRequired,
     onOpenMedia: PropTypes.func.isRequired,
     onOpenVideo: PropTypes.func.isRequired,
-    autoPlayGif: PropTypes.bool,
   };
 
   handleAccountClick = (e) => {
@@ -70,7 +69,6 @@ export default class DetailedStatus extends ImmutablePureComponent {
             media={status.get('media_attachments')}
             height={300}
             onOpenMedia={this.props.onOpenMedia}
-            autoPlayGif={this.props.autoPlayGif}
           />
         );
       }

app/javascript/mastodon/features/status/index.js

@@ -45,7 +45,6 @@ const makeMapStateToProps = () => {
     me: state.getIn(['meta', 'me']),
     boostModal: state.getIn(['meta', 'boost_modal']),
     deleteModal: state.getIn(['meta', 'delete_modal']),
-    autoPlayGif: state.getIn(['meta', 'auto_play_gif']),
   });
 
   return mapStateToProps;
@@ -68,7 +67,6 @@ export default class Status extends ImmutablePureComponent {
     me: PropTypes.string,
     boostModal: PropTypes.bool,
     deleteModal: PropTypes.bool,
-    autoPlayGif: PropTypes.bool,
     intl: PropTypes.object.isRequired,
   };
 
@@ -257,7 +255,7 @@ export default class Status extends ImmutablePureComponent {
 
   render () {
     let ancestors, descendants;
-    const { status, ancestorsIds, descendantsIds, me, autoPlayGif } = this.props;
+    const { status, ancestorsIds, descendantsIds, me } = this.props;
 
     if (status === null) {
       return (
@@ -298,7 +296,6 @@ export default class Status extends ImmutablePureComponent {
               <div className='focusable' tabIndex='0'>
                 <DetailedStatus
                   status={status}
-                  autoPlayGif={autoPlayGif}
                   me={me}
                   onOpenVideo={this.handleOpenVideo}
                   onOpenMedia={this.handleOpenMedia}

app/javascript/mastodon/features/ui/util/optional_motion.js

@@ -4,11 +4,10 @@
 import React from 'react';
 import Motion from 'react-motion/lib/Motion';
 import PropTypes from 'prop-types';
+import { reduceMotion } from '../../../initial_state';
 
 const stylesToKeep = ['opacity', 'backgroundOpacity'];
 
-let reduceMotion;
-
 const extractValue = (value) => {
   // This is either an object with a "val" property or it's a number
   return (typeof value === 'object' && value && 'val' in value) ? value.val : value;
@@ -26,12 +25,6 @@ class OptionalMotion extends React.Component {
 
     const { style, defaultStyle, children } = this.props;
 
-    if (typeof reduceMotion !== 'boolean') {
-      // This never changes without a page reload, so we can just grab it
-      // once from the body classes as opposed to using Redux's connect(),
-      // which would unnecessarily update every state change
-      reduceMotion = document.body.classList.contains('reduce-motion');
-    }
     if (reduceMotion) {
       Object.keys(style).forEach(key => {
         if (stylesToKeep.includes(key)) {