Merge pull request Expensify#36940 from tienifr/fix/36868

Fix: Context menu not appear on long press video
kmbcook · Feb 21, 2024 · 5707114 · 5707114
2 parents 70c65c1 + 84fc9c2
commit 5707114
Showing 1 changed file with 29 additions and 16 deletions.
diff --git a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js
@@ -5,7 +5,11 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Image from '@components/Image';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext';
 import useThemeStyles from '@hooks/useThemeStyles';
+import ControlSelection from '@libs/ControlSelection';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import * as ReportUtils from '@libs/ReportUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
@@ -35,22 +39,31 @@ function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}) {
                     />
                 </View>
             )}
-            <PressableWithoutFeedback
-                style={[styles.videoThumbnailContainer]}
-                accessibilityLabel={accessibilityLabel}
-                accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                onPress={onPress}
-            >
-                <View style={[styles.videoThumbnailPlayButton]}>
-                    <Icon
-                        src={Expensicons.Play}
-                        fill="white"
-                        width={variables.iconSizeXLarge}
-                        height={variables.iconSizeXLarge}
-                        additionalStyles={[styles.ml1]}
-                    />
-                </View>
-            </PressableWithoutFeedback>
+            <ShowContextMenuContext.Consumer>
+                {({anchor, report, action, checkIfContextMenuActive}) => (
+                    <PressableWithoutFeedback
+                        style={[styles.videoThumbnailContainer]}
+                        accessibilityLabel={accessibilityLabel}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                        onPress={onPress}
+                        onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                        onPressOut={() => ControlSelection.unblock()}
+                        onLongPress={(event) =>
+                            showContextMenuForReport(event, anchor, (report && report.reportID) || '', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))
+                        }
+                    >
+                        <View style={[styles.videoThumbnailPlayButton]}>
+                            <Icon
+                                src={Expensicons.Play}
+                                fill="white"
+                                width={variables.iconSizeXLarge}
+                                height={variables.iconSizeXLarge}
+                                additionalStyles={[styles.ml1]}
+                            />
+                        </View>
+                    </PressableWithoutFeedback>
+                )}
+            </ShowContextMenuContext.Consumer>
         </View>
     );
 }