From b396db785a772b3257591255cc428ed9f201cf3e Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 19 Oct 2024 12:58:38 +0800
Subject: [PATCH 1/3] fix can't scroll playback speed when fullscreen

---
 src/components/VideoPlayer/BaseVideoPlayer.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx
index 84eb988d0758..23fa58e49a5a 100644
--- a/src/components/VideoPlayer/BaseVideoPlayer.tsx
+++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx
@@ -358,6 +358,16 @@ function BaseVideoPlayer({
 
     useEffect(() => {
         videoPlayerRef.current?.setStatusAsync({volume: 0});
+        if (videoPlayerElementParentRef.current && 'addEventListener' in videoPlayerElementParentRef.current) {
+            // When the video is in fullscreen, we don't want the scroll to be captured by the InvertedFlatList of report screen.
+            // This will also allow the user to scroll the video playback speed.
+            videoPlayerElementParentRef.current.addEventListener('wheel', (ev) => {
+                if (!isFullScreenRef.current) {
+                    return;
+                }
+                ev.stopPropagation();
+            });
+        }
     }, []);
 
     return (

From 1e7fbc833c3665511ca9383c945a7cda562874a3 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 19 Oct 2024 13:17:58 +0800
Subject: [PATCH 2/3] only register the listener when become full screen

---
 .../VideoPlayer/BaseVideoPlayer.tsx           | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx
index 23fa58e49a5a..9ebabb216f83 100644
--- a/src/components/VideoPlayer/BaseVideoPlayer.tsx
+++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx
@@ -136,6 +136,8 @@ function BaseVideoPlayer({
         debouncedHideControl();
     }, [isPlaying, debouncedHideControl, controlStatusState, isPopoverVisible, canUseTouchScreen]);
 
+    const stopWheelPropagation = useCallback((ev: WheelEvent) => ev.stopPropagation(), []);
+
     const toggleControl = useCallback(() => {
         if (controlStatusState === CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW) {
             hideControl();
@@ -233,7 +235,18 @@ function BaseVideoPlayer({
         (event: VideoFullscreenUpdateEvent) => {
             onFullscreenUpdate?.(event);
 
+            if (event.fullscreenUpdate === VideoFullscreenUpdate.PLAYER_DID_PRESENT) {
+                // When the video is in fullscreen, we don't want the scroll to be captured by the InvertedFlatList of report screen.
+                // This will also allow the user to scroll the video playback speed.
+                if (videoPlayerElementParentRef.current && 'addEventListener' in videoPlayerElementParentRef.current) {
+                    videoPlayerElementParentRef.current.addEventListener('wheel', stopWheelPropagation);
+                }
+            }
+
             if (event.fullscreenUpdate === VideoFullscreenUpdate.PLAYER_DID_DISMISS) {
+                if (videoPlayerElementParentRef.current && 'removeEventListener' in videoPlayerElementParentRef.current) {
+                    videoPlayerElementParentRef.current.removeEventListener('wheel', stopWheelPropagation);
+                }
                 isFullScreenRef.current = false;
 
                 // Sync volume updates in full screen mode after leaving it
@@ -358,16 +371,6 @@ function BaseVideoPlayer({
 
     useEffect(() => {
         videoPlayerRef.current?.setStatusAsync({volume: 0});
-        if (videoPlayerElementParentRef.current && 'addEventListener' in videoPlayerElementParentRef.current) {
-            // When the video is in fullscreen, we don't want the scroll to be captured by the InvertedFlatList of report screen.
-            // This will also allow the user to scroll the video playback speed.
-            videoPlayerElementParentRef.current.addEventListener('wheel', (ev) => {
-                if (!isFullScreenRef.current) {
-                    return;
-                }
-                ev.stopPropagation();
-            });
-        }
     }, []);
 
     return (

From 34ea04e56a77f5def488c61b152dee82bbe5f5c4 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 19 Oct 2024 13:20:42 +0800
Subject: [PATCH 3/3] lint

---
 src/components/VideoPlayer/BaseVideoPlayer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx
index 9ebabb216f83..012537b75108 100644
--- a/src/components/VideoPlayer/BaseVideoPlayer.tsx
+++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx
@@ -267,7 +267,7 @@ function BaseVideoPlayer({
                 }
             }
         },
-        [isFullScreenRef, onFullscreenUpdate, pauseVideo, playVideo, videoResumeTryNumberRef, updateVolume, currentVideoPlayerRef],
+        [isFullScreenRef, onFullscreenUpdate, pauseVideo, playVideo, videoResumeTryNumberRef, updateVolume, currentVideoPlayerRef, stopWheelPropagation],
     );
 
     const bindFunctions = useCallback(() => {