Make auto-play GIFs preference affect custom emojis in web UI (#5254)

app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js

@@ -264,6 +264,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
 
   static propTypes = {
     custom_emojis: ImmutablePropTypes.list,
+    autoPlay: PropTypes.bool,
     intl: PropTypes.object.isRequired,
     onPickEmoji: PropTypes.func.isRequired,
   };
@@ -278,6 +279,8 @@ export default class EmojiPickerDropdown extends React.PureComponent {
   }
 
   onShowDropdown = () => {
+    const { autoPlay } = this.props;
+
     this.setState({ active: true });
 
     if (!EmojiPicker) {
@@ -287,7 +290,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
         EmojiPicker = EmojiMart.Picker;
         Emoji = EmojiMart.Emoji;
         // populate custom emoji in search
-        EmojiMart.emojiIndex.search('', { custom: buildCustomEmojis(this.props.custom_emojis) });
+        EmojiMart.emojiIndex.search('', { custom: buildCustomEmojis(this.props.custom_emojis, autoPlay) });
         this.setState({ loading: false });
       }).catch(() => {
         this.setState({ loading: false });

app/javascript/mastodon/features/compose/containers/emoji_picker_dropdown_container.js

@@ -3,6 +3,7 @@ import EmojiPickerDropdown from '../components/emoji_picker_dropdown';
 
 const mapStateToProps = state => ({
   custom_emojis: state.get('custom_emojis'),
+  autoPlay: state.getIn(['meta', 'auto_play_gif']),
 });
 
 export default connect(mapStateToProps)(EmojiPickerDropdown);

app/javascript/mastodon/features/emoji/emoji.js

@@ -5,6 +5,8 @@ const trie = new Trie(Object.keys(unicodeMapping));
 
 const assetHost = process.env.CDN_HOST || '';
 
+let allowAnimations = false;
+
 const emojify = (str, customEmojis = {}) => {
   let rtn = '';
   for (;;) {
@@ -25,7 +27,8 @@ 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) {
-          replacement = `<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${customEmojis[shortname]}" />`;
+          const filename = allowAnimations ? customEmojis[shortname].url : customEmojis[shortname].static_url;
+          replacement = `<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${filename}" />`;
           return true;
         }
         return false;
@@ -48,12 +51,14 @@ const emojify = (str, customEmojis = {}) => {
 
 export default emojify;
 
-export const buildCustomEmojis = customEmojis => {
+export const buildCustomEmojis = (customEmojis, overrideAllowAnimations = false) => {
   const emojis = [];
 
+  allowAnimations = overrideAllowAnimations;
+
   customEmojis.forEach(emoji => {
     const shortcode = emoji.get('shortcode');
-    const url       = emoji.get('static_url');
+    const url       = allowAnimations ? emoji.get('url') : emoji.get('static_url');
     const name      = shortcode.replace(':', '');
 
     emojis.push({

app/javascript/mastodon/reducers/custom_emojis.js

@@ -8,7 +8,7 @@ const initialState = ImmutableList();
 export default function custom_emojis(state = initialState, action) {
   switch(action.type) {
   case STORE_HYDRATE:
-    emojiSearch('', { custom: buildCustomEmojis(action.state.get('custom_emojis', [])) });
+    emojiSearch('', { custom: buildCustomEmojis(action.state.get('custom_emojis', []), action.state.getIn(['meta', 'auto_play_gif'], false)) });
     return action.state.get('custom_emojis');
   default:
     return state;

app/javascript/mastodon/reducers/statuses.js

@@ -58,9 +58,10 @@ const normalizeStatus = (state, status) => {
     normalStatus.reblog = status.reblog.id;
   }
 
-  const searchContent = [status.spoiler_text, status.content].join(' ').replace(/<br \/>/g, '\n').replace(/<\/p><p>/g, '\n\n');
+  const searchContent = [status.spoiler_text, status.content].join('\n\n').replace(/<br \/>/g, '\n').replace(/<\/p><p>/g, '\n\n');
+
   const emojiMap = normalStatus.emojis.reduce((obj, emoji) => {
-    obj[`:${emoji.shortcode}:`] = emoji.static_url;
+    obj[`:${emoji.shortcode}:`] = emoji;
     return obj;
   }, {});