From 6d7d9b808f46ab871df1f8c046e5936eeb183e9f Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Tue, 20 Feb 2024 22:56:28 +0700
Subject: [PATCH 1/4] fix: 36868

---
 .../VideoPlayerThumbnail.js                   | 40 +++++++++++--------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js
index 9e6069e4d979..1e7615ad20fd 100644
--- a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js
+++ b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js
@@ -8,6 +8,8 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext';
+import * as ReportUtils from '@libs/ReportUtils';
 
 const propTypes = {
     onPress: PropTypes.func.isRequired,
@@ -35,23 +37,29 @@ 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}
+                    onLongPress={(event) => showContextMenuForReport(event, anchor, 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>
+            
     );
 }
 

From 7ebee9a69a58b36adb5a7d4f94137419dca725c6 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 21 Feb 2024 02:23:05 +0700
Subject: [PATCH 2/4] fix lint

---
 .../VideoPlayerThumbnail.js                   | 39 +++++++++----------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js
index 1e7615ad20fd..8d50ea076748 100644
--- a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js
+++ b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js
@@ -5,11 +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 * as ReportUtils from '@libs/ReportUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
-import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext';
-import * as ReportUtils from '@libs/ReportUtils';
 
 const propTypes = {
     onPress: PropTypes.func.isRequired,
@@ -39,27 +39,26 @@ function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}) {
             )}
             <ShowContextMenuContext.Consumer>
                 {({anchor, report, action, checkIfContextMenuActive}) => (
-                <PressableWithoutFeedback
-                    style={[styles.videoThumbnailContainer]}
-                    accessibilityLabel={accessibilityLabel}
-                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                    onPress={onPress}
-                    onLongPress={(event) => showContextMenuForReport(event, anchor, 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>
+                    <PressableWithoutFeedback
+                        style={[styles.videoThumbnailContainer]}
+                        accessibilityLabel={accessibilityLabel}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                        onPress={onPress}
+                        onLongPress={(event) => showContextMenuForReport(event, anchor, 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>
-            
     );
 }
 

From cd6b1a835314f605eb01d8994d54a814e2ff5583 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 21 Feb 2024 02:35:06 +0700
Subject: [PATCH 3/4] fix lint

---
 src/components/VideoPlayerPreview/VideoPlayerThumbnail.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js
index 8d50ea076748..b31da89118a8 100644
--- a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js
+++ b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js
@@ -44,7 +44,9 @@ function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}) {
                         accessibilityLabel={accessibilityLabel}
                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                         onPress={onPress}
-                        onLongPress={(event) => showContextMenuForReport(event, anchor, report?.reportID ?? '', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
+                        onLongPress={(event) =>
+                            showContextMenuForReport(event, anchor, (report && report.reportID) || '', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))
+                        }
                     >
                         <View style={[styles.videoThumbnailPlayButton]}>
                             <Icon

From 84fc9c26897bd6becf9cbef515e966931876316d Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 21 Feb 2024 02:51:11 +0700
Subject: [PATCH 4/4] fix: long press video toggles text selection

---
 src/components/VideoPlayerPreview/VideoPlayerThumbnail.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js
index b31da89118a8..595442c317d5 100644
--- a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js
+++ b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js
@@ -7,6 +7,8 @@ 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';
@@ -44,6 +46,8 @@ function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}) {
                         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))
                         }