From 45682f876d4257c61b1d42469d04dd53fc4f8189 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 7 Oct 2017 02:38:52 +0200 Subject: [PATCH] Make auto-play GIFs preference affect custom emojis in web UI (#5254) --- .../compose/components/emoji_picker_dropdown.js | 5 ++++- .../containers/emoji_picker_dropdown_container.js | 1 + app/javascript/mastodon/features/emoji/emoji.js | 11 ++++++++--- app/javascript/mastodon/reducers/custom_emojis.js | 2 +- app/javascript/mastodon/reducers/statuses.js | 5 +++-- 5 files changed, 17 insertions(+), 7 deletions(-) diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js index 2bea5e2b12..210721d9c1 100644 --- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js +++ b/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 }); diff --git a/app/javascript/mastodon/features/compose/containers/emoji_picker_dropdown_container.js b/app/javascript/mastodon/features/compose/containers/emoji_picker_dropdown_container.js index 7a8026bbc6..cecc463201 100644 --- a/app/javascript/mastodon/features/compose/containers/emoji_picker_dropdown_container.js +++ b/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); diff --git a/app/javascript/mastodon/features/emoji/emoji.js b/app/javascript/mastodon/features/emoji/emoji.js index 998cb0a065..b70fc2b373 100644 --- a/app/javascript/mastodon/features/emoji/emoji.js +++ b/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 = `${shortname}`; + const filename = allowAnimations ? customEmojis[shortname].url : customEmojis[shortname].static_url; + replacement = `${shortname}`; 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({ diff --git a/app/javascript/mastodon/reducers/custom_emojis.js b/app/javascript/mastodon/reducers/custom_emojis.js index 307bcc7dc4..f2a8ca5d2e 100644 --- a/app/javascript/mastodon/reducers/custom_emojis.js +++ b/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; diff --git a/app/javascript/mastodon/reducers/statuses.js b/app/javascript/mastodon/reducers/statuses.js index 32772fff7d..b1fb4c5da3 100644 --- a/app/javascript/mastodon/reducers/statuses.js +++ b/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(/
/g, '\n').replace(/<\/p>

/g, '\n\n'); + const searchContent = [status.spoiler_text, status.content].join('\n\n').replace(/
/g, '\n').replace(/<\/p>

/g, '\n\n'); + const emojiMap = normalStatus.emojis.reduce((obj, emoji) => { - obj[`:${emoji.shortcode}:`] = emoji.static_url; + obj[`:${emoji.shortcode}:`] = emoji; return obj; }, {});