[Glitch] Play animated custom emoji on hover

Port 7de8c51873 to glitch-soc
This commit is contained in:
ThibG
2019-07-21 18:10:40 +02:00
committed by Thibaut Girka
parent 621590b4ab
commit c1231a846a
5 changed files with 128 additions and 3 deletions

View File

@ -5,6 +5,7 @@ import { isRtl } from 'flavours/glitch/util/rtl';
import { FormattedMessage } from 'react-intl';
import Permalink from './permalink';
import classnames from 'classnames';
import { autoPlayGif } from 'flavours/glitch/util/initial_state';
export default class StatusContent extends React.PureComponent {
@ -57,12 +58,35 @@ export default class StatusContent extends React.PureComponent {
}
}
_updateStatusEmojis () {
const node = this.node;
if (!node || autoPlayGif) {
return;
}
const emojis = node.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i];
if (emoji.classList.contains('status-emoji')) {
continue;
}
emoji.classList.add('status-emoji');
emoji.addEventListener('mouseenter', this.handleEmojiMouseEnter, false);
emoji.addEventListener('mouseleave', this.handleEmojiMouseLeave, false);
}
}
componentDidMount () {
this._updateStatusLinks();
this._updateStatusEmojis();
}
componentDidUpdate () {
this._updateStatusLinks();
this._updateStatusEmojis();
if (this.props.onUpdate) this.props.onUpdate();
}
@ -86,6 +110,14 @@ export default class StatusContent extends React.PureComponent {
}
}
handleEmojiMouseEnter = ({ target }) => {
target.src = target.getAttribute('data-original');
}
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
}
handleMouseDown = (e) => {
this.startXY = [e.clientX, e.clientY];
}