From 1a6b61c2489a3667d81d7443f8c7346596e9e0ae Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 15 Oct 2021 17:56:03 -0500
Subject: [PATCH] EmojiReacts: consistent hover behavior, isUserTouching()

---
 app/soapbox/components/status_action_bar.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js
index 0b7c5e0a5..4baad56c4 100644
--- a/app/soapbox/components/status_action_bar.js
+++ b/app/soapbox/components/status_action_bar.js
@@ -15,6 +15,7 @@ import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji_reacts';
 import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
 import { List as ImmutableList } from 'immutable';
 import { getFeatures } from 'soapbox/utils/features';
+import { isUserTouching } from 'soapbox/is_mobile';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
@@ -133,12 +134,10 @@ class StatusActionBar extends ImmutablePureComponent {
     });
   }
 
-  isMobile = () => window.matchMedia('only screen and (max-width: 895px)').matches;
-
   handleLikeButtonHover = e => {
     const { features } = this.props;
 
-    if (features.emojiReacts && !this.isMobile()) {
+    if (features.emojiReacts && !isUserTouching()) {
       this.setState({ emojiSelectorVisible: true });
     }
   }
@@ -146,7 +145,7 @@ class StatusActionBar extends ImmutablePureComponent {
   handleLikeButtonLeave = e => {
     const { features } = this.props;
 
-    if (features.emojiReacts && !this.isMobile()) {
+    if (features.emojiReacts && !isUserTouching()) {
       this.setState({ emojiSelectorVisible: false });
     }
   }
@@ -155,7 +154,7 @@ class StatusActionBar extends ImmutablePureComponent {
     const { features } = this.props;
     const meEmojiReact = getReactForStatus(this.props.status, this.props.allowedEmoji) || '👍';
 
-    if (features.emojiReacts && this.isMobile()) {
+    if (features.emojiReacts && isUserTouching()) {
       if (this.state.emojiSelectorVisible) {
         this.handleReactClick(meEmojiReact)();
       } else {