diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features')
-rw-r--r-- | app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js | 44 |
1 files changed, 43 insertions, 1 deletions
diff --git a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js index cd8a6281c..a80fa824b 100644 --- a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js +++ b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js @@ -11,6 +11,7 @@ import Permalink from 'flavours/glitch/components/permalink'; import IconButton from 'flavours/glitch/components/icon_button'; import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp'; import { HotKeys } from 'react-hotkeys'; +import { autoPlayGif } from 'flavours/glitch/util/initial_state'; const messages = defineMessages({ more: { id: 'status.more', defaultMessage: 'More' }, @@ -64,6 +65,43 @@ class Conversation extends ImmutablePureComponent { } } + _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; @@ -112,6 +150,10 @@ class Conversation extends ImmutablePureComponent { this.setState({ isExpanded: value }); } + setNamesRef = (c) => { + this.namesNode = c; + } + render () { const { accounts, lastStatus, unread, intl } = this.props; const { isExpanded } = this.state; @@ -162,7 +204,7 @@ class Conversation extends ImmutablePureComponent { <RelativeTimestamp timestamp={lastStatus.get('created_at')} /> </div> - <div className='conversation__content__names'> + <div className='conversation__content__names' ref={this.setNamesRef}> <FormattedMessage id='conversation.with' defaultMessage='With {names}' values={{ names: <span>{names}</span> }} /> </div> </div> |