From 26a8c6fd2dd02426d0353887f0db6eb5b470305a Mon Sep 17 00:00:00 2001 From: ThibG Date: Tue, 1 Oct 2019 17:11:14 +0200 Subject: [PATCH] Fix custom emoji animation on hover in conversations view (#12040) --- .../components/conversation.js | 44 ++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.js b/app/javascript/mastodon/features/direct_timeline/components/conversation.js index db9381f330..2cbaa0791b 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 { -
+
{names} }} />