Refactor emoji GIF animation (#36165)

app/javascript/mastodon/components/display_name/no-domain.tsx

@@ -14,7 +14,10 @@ export const DisplayNameWithoutDomain: FC<
     ComponentPropsWithoutRef<'span'>
 > = ({ account, className, children, ...props }) => {
   return (
-    <span {...props} className={classNames('display-name', className)}>
+    <span
+      {...props}
+      className={classNames('display-name animate-parent', className)}
+    >
       <bdi>
         {account ? (
           <EmojiHTML

app/javascript/mastodon/components/status_content.jsx

@@ -140,32 +140,6 @@ class StatusContent extends PureComponent {
     }
   }
 
-  handleMouseEnter = ({ currentTarget }) => {
-    if (autoPlayGif) {
-      return;
-    }
-
-    const emojis = currentTarget.querySelectorAll('.custom-emoji');
-
-    for (var i = 0; i < emojis.length; i++) {
-      let emoji = emojis[i];
-      emoji.src = emoji.getAttribute('data-original');
-    }
-  };
-
-  handleMouseLeave = ({ currentTarget }) => {
-    if (autoPlayGif) {
-      return;
-    }
-
-    const emojis = currentTarget.querySelectorAll('.custom-emoji');
-
-    for (var i = 0; i < emojis.length; i++) {
-      let emoji = emojis[i];
-      emoji.src = emoji.getAttribute('data-static');
-    }
-  };
-
   componentDidMount () {
     this._updateStatusLinks();
   }
@@ -257,7 +231,13 @@ class StatusContent extends PureComponent {
     if (this.props.onClick) {
       return (
         <>
-          <div className={classNames} ref={this.setRef} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+          <div
+            className={classNames}
+            ref={this.setRef}
+            onMouseDown={this.handleMouseDown}
+            onMouseUp={this.handleMouseUp}
+            key='status-content'
+          >
             <EmojiHTML
               className='status__content__text status__content__text--visible translate'
               lang={language}
@@ -274,7 +254,7 @@ class StatusContent extends PureComponent {
       );
     } else {
       return (
-        <div className={classNames} ref={this.setRef} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+        <div className={classNames} ref={this.setRef}>
           <EmojiHTML
             className='status__content__text status__content__text--visible translate'
             lang={language}