1 files changed, 96 insertions, 58 deletions
diff --git a/app/javascript/flavours/glitch/components/display_name.js b/app/javascript/flavours/glitch/components/display_name.js
index 7f6ef5a5d..9d8c4a775 100644
--- a/app/javascript/flavours/glitch/components/display_name.js
+++ b/app/javascript/flavours/glitch/components/display_name.js
@@ -1,73 +1,111 @@
-//  Package imports.
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { autoPlayGif } from 'flavours/glitch/util/initial_state';
+
+export default class DisplayName extends React.PureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map,
+    className: PropTypes.string,
+    inline: PropTypes.bool,
+    localDomain: PropTypes.string,
+    others: ImmutablePropTypes.list,
+    handleClick: PropTypes.func,
+  };
+
+  _updateEmojis () {
+    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);
+    }
+  }
 
-//  The component.
-export default function DisplayName ({
-  account,
-  className,
-  inline,
-  localDomain,
-  others,
-  onAccountClick,
-}) {
-  const computedClass = classNames('display-name', { inline }, className);
+  componentDidMount () {
+    this._updateEmojis();
+  }
 
-  if (!account) return null;
+  componentDidUpdate () {
+    this._updateEmojis();
+  }
 
-  let displayName, suffix;
+  handleEmojiMouseEnter = ({ target }) => {
+    target.src = target.getAttribute('data-original');
+  }
 
-  let acct = account.get('acct');
+  handleEmojiMouseLeave = ({ target }) => {
+    target.src = target.getAttribute('data-static');
+  }
 
-  if (acct.indexOf('@') === -1 && localDomain) {
-    acct = `${acct}@${localDomain}`;
+  setRef = (c) => {
+    this.node = c;
   }
 
-  if (others && others.size > 0) {
-    displayName = others.take(2).map(a => (
-      <a
-        href={a.get('url')}
-        target='_blank'
-        onClick={(e) => onAccountClick(a.get('id'), e)}
-        title={`@${a.get('acct')}`}
-      >
-        <bdi key={a.get('id')}>
-          <strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} />
-        </bdi>
-      </a>
-    )).reduce((prev, cur) => [prev, ', ', cur]);
-
-    if (others.size - 2 > 0) {
-     displayName.push(` +${others.size - 2}`);
+  render() {
+    const { account, className, inline, localDomain, others, onAccountClick } = this.props;
+
+    const computedClass = classNames('display-name', { inline }, className);
+
+    if (!account) return null;
+
+    let displayName, suffix;
+
+    let acct = account.get('acct');
+
+    if (acct.indexOf('@') === -1 && localDomain) {
+      acct = `${acct}@${localDomain}`;
     }
 
-    suffix = (
-      <a href={account.get('url')} target='_blank' onClick={(e) => onAccountClick(account.get('id'), e)}>
-        <span className='display-name__account'>@{acct}</span>
-      </a>
+    if (others && others.size > 0) {
+      displayName = others.take(2).map(a => (
+        <a
+          href={a.get('url')}
+          target='_blank'
+          onClick={(e) => onAccountClick(a.get('id'), e)}
+          title={`@${a.get('acct')}`}
+        >
+          <bdi key={a.get('id')}>
+            <strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} />
+          </bdi>
+        </a>
+      )).reduce((prev, cur) => [prev, ', ', cur]);
+
+      if (others.size - 2 > 0) {
+       displayName.push(` +${others.size - 2}`);
+      }
+
+      suffix = (
+        <a href={account.get('url')} target='_blank' onClick={(e) => onAccountClick(account.get('id'), e)}>
+          <span className='display-name__account'>@{acct}</span>
+        </a>
+      );
+    } else {
+      displayName = <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>;
+      suffix      = <span className='display-name__account'>@{acct}</span>;
+    }
+
+    return (
+      <span className={computedClass} ref={this.setRef}>
+        {displayName}
+        {inline ? ' ' : null}
+        {suffix}
+      </span>
     );
-  } else {
-    displayName = <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>;
-    suffix      = <span className='display-name__account'>@{acct}</span>;
   }
 
-  return (
-    <span className={computedClass}>
-      {displayName}
-      {inline ? ' ' : null}
-      {suffix}
-    </span>
-  );
 }
-
-//  Props.
-DisplayName.propTypes = {
-  account: ImmutablePropTypes.map,
-  className: PropTypes.string,
-  inline: PropTypes.bool,
-  localDomain: PropTypes.string,
-  others: ImmutablePropTypes.list,
-  handleClick: PropTypes.func,
-};