Make auto-play GIFs preference affect custom emojis in web UI (#5254)
This commit is contained in:
parent
4413d81d7f
commit
45682f876d
|
@ -264,6 +264,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
custom_emojis: ImmutablePropTypes.list,
|
custom_emojis: ImmutablePropTypes.list,
|
||||||
|
autoPlay: PropTypes.bool,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
onPickEmoji: PropTypes.func.isRequired,
|
onPickEmoji: PropTypes.func.isRequired,
|
||||||
};
|
};
|
||||||
|
@ -278,6 +279,8 @@ export default class EmojiPickerDropdown extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
onShowDropdown = () => {
|
onShowDropdown = () => {
|
||||||
|
const { autoPlay } = this.props;
|
||||||
|
|
||||||
this.setState({ active: true });
|
this.setState({ active: true });
|
||||||
|
|
||||||
if (!EmojiPicker) {
|
if (!EmojiPicker) {
|
||||||
|
@ -287,7 +290,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
|
||||||
EmojiPicker = EmojiMart.Picker;
|
EmojiPicker = EmojiMart.Picker;
|
||||||
Emoji = EmojiMart.Emoji;
|
Emoji = EmojiMart.Emoji;
|
||||||
// populate custom emoji in search
|
// 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 });
|
this.setState({ loading: false });
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
this.setState({ loading: false });
|
this.setState({ loading: false });
|
||||||
|
|
|
@ -3,6 +3,7 @@ import EmojiPickerDropdown from '../components/emoji_picker_dropdown';
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
custom_emojis: state.get('custom_emojis'),
|
custom_emojis: state.get('custom_emojis'),
|
||||||
|
autoPlay: state.getIn(['meta', 'auto_play_gif']),
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(mapStateToProps)(EmojiPickerDropdown);
|
export default connect(mapStateToProps)(EmojiPickerDropdown);
|
||||||
|
|
|
@ -5,6 +5,8 @@ const trie = new Trie(Object.keys(unicodeMapping));
|
||||||
|
|
||||||
const assetHost = process.env.CDN_HOST || '';
|
const assetHost = process.env.CDN_HOST || '';
|
||||||
|
|
||||||
|
let allowAnimations = false;
|
||||||
|
|
||||||
const emojify = (str, customEmojis = {}) => {
|
const emojify = (str, customEmojis = {}) => {
|
||||||
let rtn = '';
|
let rtn = '';
|
||||||
for (;;) {
|
for (;;) {
|
||||||
|
@ -25,7 +27,8 @@ const emojify = (str, customEmojis = {}) => {
|
||||||
// now got a replacee as ':shortname:'
|
// now got a replacee as ':shortname:'
|
||||||
// if you want additional emoji handler, add statements below which set replacement and return true.
|
// if you want additional emoji handler, add statements below which set replacement and return true.
|
||||||
if (shortname in customEmojis) {
|
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 true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
|
@ -48,12 +51,14 @@ const emojify = (str, customEmojis = {}) => {
|
||||||
|
|
||||||
export default emojify;
|
export default emojify;
|
||||||
|
|
||||||
export const buildCustomEmojis = customEmojis => {
|
export const buildCustomEmojis = (customEmojis, overrideAllowAnimations = false) => {
|
||||||
const emojis = [];
|
const emojis = [];
|
||||||
|
|
||||||
|
allowAnimations = overrideAllowAnimations;
|
||||||
|
|
||||||
customEmojis.forEach(emoji => {
|
customEmojis.forEach(emoji => {
|
||||||
const shortcode = emoji.get('shortcode');
|
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(':', '');
|
const name = shortcode.replace(':', '');
|
||||||
|
|
||||||
emojis.push({
|
emojis.push({
|
||||||
|
|
|
@ -8,7 +8,7 @@ const initialState = ImmutableList();
|
||||||
export default function custom_emojis(state = initialState, action) {
|
export default function custom_emojis(state = initialState, action) {
|
||||||
switch(action.type) {
|
switch(action.type) {
|
||||||
case STORE_HYDRATE:
|
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');
|
return action.state.get('custom_emojis');
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
|
|
|
@ -58,9 +58,10 @@ const normalizeStatus = (state, status) => {
|
||||||
normalStatus.reblog = status.reblog.id;
|
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) => {
|
const emojiMap = normalStatus.emojis.reduce((obj, emoji) => {
|
||||||
obj[`:${emoji.shortcode}:`] = emoji.static_url;
|
obj[`:${emoji.shortcode}:`] = emoji;
|
||||||
return obj;
|
return obj;
|
||||||
}, {});
|
}, {});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue