From b6b8f34d7095570ace583ffa9326b1cb0625f049 Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:35:43 +0100
Subject: [PATCH] fix: ignore pan gesture in slider vicinity

---
 apps/expo/src/components/player/VideoPlayer.tsx | 12 ++++++++++++
 apps/expo/src/components/player/VideoSlider.tsx | 16 ++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/apps/expo/src/components/player/VideoPlayer.tsx b/apps/expo/src/components/player/VideoPlayer.tsx
index a209995..c2cb062 100644
--- a/apps/expo/src/components/player/VideoPlayer.tsx
+++ b/apps/expo/src/components/player/VideoPlayer.tsx
@@ -27,6 +27,7 @@ import { usePlayerStore } from "~/stores/player/store";
 import { Text } from "../ui/Text";
 import { CaptionRenderer } from "./CaptionRenderer";
 import { ControlsOverlay } from "./ControlsOverlay";
+import { isPointInSliderVicinity } from "./VideoSlider";
 
 export const VideoPlayer = () => {
   const {
@@ -51,6 +52,7 @@ export const VideoPlayer = () => {
   const [resizeMode, setResizeMode] = useState(ResizeMode.CONTAIN);
   const [shouldPlay, setShouldPlay] = useState(true);
   const [hasStartedPlaying, setHasStartedPlaying] = useState(false);
+  const isGestureInSliderVicinity = useSharedValue(false);
   const router = useRouter();
   const scale = useSharedValue(1);
   const [lastVelocityY, setLastVelocityY] = useState(0);
@@ -63,6 +65,10 @@ export const VideoPlayer = () => {
   const setStatus = usePlayerStore((state) => state.setStatus);
   const setIsIdle = usePlayerStore((state) => state.setIsIdle);
 
+  const checkGestureInSliderVicinity = (x: number, y: number) => {
+    isGestureInSliderVicinity.value = isPointInSliderVicinity(x, y);
+  };
+
   const updateResizeMode = (newMode: ResizeMode) => {
     setResizeMode(newMode);
     void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
@@ -90,6 +96,12 @@ export const VideoPlayer = () => {
   const screenHalfWidth = Dimensions.get("window").width / 2;
 
   const panGesture = Gesture.Pan()
+    .onStart((event) => {
+      runOnJS(checkGestureInSliderVicinity)(event.x, event.y);
+      if (isGestureInSliderVicinity.value) {
+        return;
+      }
+    })
     .onUpdate((event) => {
       const divisor = 5000;
       const panIsInHeaderOrFooter = event.y < 100 || event.y > 400;
diff --git a/apps/expo/src/components/player/VideoSlider.tsx b/apps/expo/src/components/player/VideoSlider.tsx
index 08f416f..870ab7c 100644
--- a/apps/expo/src/components/player/VideoSlider.tsx
+++ b/apps/expo/src/components/player/VideoSlider.tsx
@@ -30,6 +30,22 @@ interface VideoSliderProps {
   onSlidingComplete?: (value: number) => void;
 }
 
+const SLIDER_VICINITY = {
+  x: 20,
+  y: 200,
+  width: Dimensions.get("window").width - 40,
+  height: 20,
+};
+
+export const isPointInSliderVicinity = (x: number, y: number) => {
+  return (
+    x >= SLIDER_VICINITY.x &&
+    x <= SLIDER_VICINITY.x + SLIDER_VICINITY.width &&
+    y >= SLIDER_VICINITY.y &&
+    y <= SLIDER_VICINITY.y + SLIDER_VICINITY.height
+  );
+};
+
 const VideoSlider = ({ onSlidingComplete }: VideoSliderProps) => {
   const tapRef = useRef<TapGestureHandler>(null);
   const panRef = useRef<PanGestureHandler>(null);