diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.js b/app/javascript/mastodon/features/direct_timeline/components/conversation.js
index db9381f33..2cbaa0791 100644
--- a/app/javascript/mastodon/features/direct_timeline/components/conversation.js
+++ b/app/javascript/mastodon/features/direct_timeline/components/conversation.js
@@ -11,6 +11,7 @@ import Permalink from 'mastodon/components/permalink';
import IconButton from 'mastodon/components/icon_button';
import RelativeTimestamp from 'mastodon/components/relative_timestamp';
import { HotKeys } from 'react-hotkeys';
+import { autoPlayGif } from 'mastodon/initial_state';
const messages = defineMessages({
more: { id: 'status.more', defaultMessage: 'More' },
@@ -41,6 +42,43 @@ class Conversation extends ImmutablePureComponent {
intl: PropTypes.object.isRequired,
};
+ _updateEmojis () {
+ const node = this.namesNode;
+
+ 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._updateEmojis();
+ }
+
+ componentDidUpdate () {
+ this._updateEmojis();
+ }
+
+ handleEmojiMouseEnter = ({ target }) => {
+ target.src = target.getAttribute('data-original');
+ }
+
+ handleEmojiMouseLeave = ({ target }) => {
+ target.src = target.getAttribute('data-static');
+ }
+
handleClick = () => {
if (!this.context.router) {
return;
@@ -83,6 +121,10 @@ class Conversation extends ImmutablePureComponent {
this.props.onToggleHidden(this.props.lastStatus);
}
+ setNamesRef = (c) => {
+ this.namesNode = c;
+ }
+
render () {
const { accounts, lastStatus, unread, intl } = this.props;
@@ -127,7 +169,7 @@ class Conversation extends ImmutablePureComponent {