From 3c885c1caf0c5f101d35f5172ee507f16faff11f Mon Sep 17 00:00:00 2001
From: Amir Ghezelbash <thisisamir98@gmail.com>
Date: Mon, 2 Dec 2024 13:18:53 +0330
Subject: [PATCH] feat: Close in call reaction menu on outside click
 (WPB-12197) (#18409)

---
 src/script/components/calling/FullscreenVideoCall.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/script/components/calling/FullscreenVideoCall.tsx b/src/script/components/calling/FullscreenVideoCall.tsx
index 67290ca6ab1..f1e9c63aff9 100644
--- a/src/script/components/calling/FullscreenVideoCall.tsx
+++ b/src/script/components/calling/FullscreenVideoCall.tsx
@@ -17,7 +17,7 @@
  *
  */
 
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 
 import {DefaultConversationRoleName} from '@wireapp/api-client/lib/conversation/';
 import {TabIndex} from '@wireapp/react-ui-kit/lib/types/enums';
@@ -39,6 +39,7 @@ import {useCallAlertState} from 'Components/calling/useCallAlertState';
 import {ConversationClassifiedBar} from 'Components/ClassifiedBar/ClassifiedBar';
 import * as Icon from 'Components/Icon';
 import {ModalComponent} from 'Components/Modals/ModalComponent';
+import {useClickOutside} from 'Hooks/useClickOutside';
 import {CallingRepository} from 'src/script/calling/CallingRepository';
 import {Config} from 'src/script/Config';
 import {isCallViewOption} from 'src/script/guards/CallView';
@@ -149,6 +150,11 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
     'sharesCamera',
   ]);
 
+  const emojiBarRef = useRef(null);
+  const emojiBarToggleButtonRef = useRef(null);
+
+  useClickOutside(emojiBarRef, () => setShowEmojisBar(false), emojiBarToggleButtonRef);
+
   const {blurredVideoStream} = useKoSubscribableChildren(selfParticipant, ['blurredVideoStream']);
   const hasBlurredBackground = !!blurredVideoStream;
 
@@ -794,6 +800,7 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
                     <li className="video-controls__item">
                       {showEmojisBar && (
                         <div
+                          ref={emojiBarRef}
                           role="toolbar"
                           className="video-controls-emoji-bar"
                           data-uie-name="video-controls-emoji-bar"
@@ -818,6 +825,7 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
                         </div>
                       )}
                       <button
+                        ref={emojiBarToggleButtonRef}
                         title={t('callReactions')}
                         className={classNames('video-controls__button_primary', {active: showEmojisBar})}
                         onClick={() => setShowEmojisBar(prev => !prev)}