From 631925a7e2e5f7e75ea6bd661ee506f7d2d8bf15 Mon Sep 17 00:00:00 2001
From: QichenZhu <57348009+QichenZhu@users.noreply.github.com>
Date: Mon, 11 Nov 2024 20:40:01 +1300
Subject: [PATCH] Fix fullscreen video controls difficult to click

---
 .../Attachments/AttachmentCarousel/index.tsx  | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index d9c4f7e93fbeb..bf1daece733e5 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -3,7 +3,7 @@ import type {MutableRefObject} from 'react';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {ListRenderItemInfo} from 'react-native';
 import {Keyboard, PixelRatio, View} from 'react-native';
-import type {GestureType} from 'react-native-gesture-handler';
+import type {ComposedGesture, GestureType} from 'react-native-gesture-handler';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import {useOnyx} from 'react-native-onyx';
 import Animated, {scrollTo, useAnimatedRef, useSharedValue} from 'react-native-reanimated';
@@ -38,6 +38,19 @@ const viewabilityConfig = {
 
 const MIN_FLING_VELOCITY = 500;
 
+type DeviceAwareGestureDetectorProps = {
+    canUseTouchScreen: boolean;
+    gesture: ComposedGesture | GestureType;
+    children: React.ReactNode;
+};
+
+function DeviceAwareGestureDetector({canUseTouchScreen, gesture, children}: DeviceAwareGestureDetectorProps) {
+    // Don't render GestureDetector on non-touchable devices to prevent unexpected pointer event capture.
+    // This issue is left out on touchable devices since finger touch works fine.
+    // See: https://github.com/Expensify/App/issues/51246
+    return canUseTouchScreen ? <GestureDetector gesture={gesture}>{children}</GestureDetector> : children;
+}
+
 function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibility, type, accountID, onClose}: AttachmentCarouselProps) {
     const theme = useTheme();
     const {translate} = useLocalize();
@@ -286,7 +299,10 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
                         cancelAutoHideArrow={cancelAutoHideArrows}
                     />
                     <AttachmentCarouselPagerContext.Provider value={context}>
-                        <GestureDetector gesture={pan}>
+                        <DeviceAwareGestureDetector
+                            canUseTouchScreen={canUseTouchScreen}
+                            gesture={pan}
+                        >
                             <Animated.FlatList
                                 keyboardShouldPersistTaps="handled"
                                 horizontal
@@ -305,7 +321,7 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
                                 viewabilityConfig={viewabilityConfig}
                                 onViewableItemsChanged={updatePage}
                             />
-                        </GestureDetector>
+                        </DeviceAwareGestureDetector>
                     </AttachmentCarouselPagerContext.Provider>
 
                     <CarouselActions onCycleThroughAttachments={cycleThroughAttachments} />