vbatts/mastodon
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Eugen Rochko 2017-10-07 02:38:52 +02:00 committed by GitHub
parent 4413d81d7f
commit 45682f876d
5 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
View file

@ -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 });

1
app/javascript/mastodon/features/compose/containers/emoji_picker_dropdown_container.js
View file

@ -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);

11
app/javascript/mastodon/features/emoji/emoji.js
View file

@ -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({

2
app/javascript/mastodon/reducers/custom_emojis.js
View file

@ -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;

5
app/javascript/mastodon/reducers/statuses.js
View file

@ -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;
}, {}); }, {});