From 55902f1d809e05fabdb6cdad5278a6b42eec8c34 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 2 May 2021 15:55:10 -0500
Subject: [PATCH] Emoji reacts: use hover or click depending on isUserTouching,
 fixes #629

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

diff --git a/app/soapbox/features/status/components/action_bar.js b/app/soapbox/features/status/components/action_bar.js
index c0115f669..78e0c8c2b 100644
--- a/app/soapbox/features/status/components/action_bar.js
+++ b/app/soapbox/features/status/components/action_bar.js
@@ -8,6 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
 import { isStaff } from 'soapbox/utils/accounts';
+import { isUserTouching } from 'soapbox/is_mobile';
 import EmojiSelector from 'soapbox/components/emoji_selector';
 import { getReactForStatus } from 'soapbox/utils/emoji_reacts';
 
@@ -129,19 +130,17 @@ class ActionBar extends React.PureComponent {
     }
   }
 
-  isMobile = () => window.matchMedia('only screen and (max-width: 895px)').matches;
-
   handleLikeButtonHover = e => {
-    if (!this.isMobile()) this.setState({ emojiSelectorVisible: true });
+    if (!isUserTouching()) this.setState({ emojiSelectorVisible: true });
   }
 
   handleLikeButtonLeave = e => {
-    if (!this.isMobile()) this.setState({ emojiSelectorVisible: false });
+    if (!isUserTouching()) this.setState({ emojiSelectorVisible: false });
   }
 
   handleLikeButtonClick = e => {
     const meEmojiReact = getReactForStatus(this.props.status, this.props.allowedEmoji) || '👍';
-    if (this.isMobile()) {
+    if (isUserTouching()) {
       if (this.state.emojiSelectorVisible) {
         this.handleReactClick(meEmojiReact)();
       } else {