From 49a65963886336640109472c2814b45380b45646 Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Tue, 20 Feb 2024 21:07:48 +0100
Subject: [PATCH] fix: adjust values and overlay visibilty based on gesture
 velocity change

---
 .../src/components/player/VideoPlayer.tsx     | 33 ++++++++++++-------
 apps/expo/src/hooks/player/useBrightness.ts   | 23 +++++++------
 apps/expo/src/hooks/player/useVolume.ts       | 11 ++++---
 3 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/apps/expo/src/components/player/VideoPlayer.tsx b/apps/expo/src/components/player/VideoPlayer.tsx
index 8460b73..8414f47 100644
--- a/apps/expo/src/components/player/VideoPlayer.tsx
+++ b/apps/expo/src/components/player/VideoPlayer.tsx
@@ -47,6 +47,7 @@ export const VideoPlayer = () => {
   const [hasStartedPlaying, setHasStartedPlaying] = useState(false);
   const router = useRouter();
   const scale = useSharedValue(1);
+  const [lastVelocityY, setLastVelocityY] = useState(0);
 
   const isIdle = usePlayerStore((state) => state.interface.isIdle);
   const stream = usePlayerStore((state) => state.interface.currentStream);
@@ -87,26 +88,34 @@ export const VideoPlayer = () => {
 
       const directionMultiplier = event.velocityY < 0 ? 1 : -1;
 
+      const change = directionMultiplier * Math.abs(event.velocityY / divisor);
+      const newVolume = Math.max(0, Math.min(1, currentVolume.value + change));
+      const newBrightness = Math.max(0, Math.min(1, brightness.value + change));
+
       if (event.x > screenHalfWidth) {
-        const change =
-          directionMultiplier * Math.abs(event.velocityY / divisor);
-        const newVolume = Math.max(
-          0,
-          Math.min(1, currentVolume.value + change),
-        );
         runOnJS(handleVolumeChange)(newVolume);
       } else {
-        const change =
-          directionMultiplier * Math.abs(event.velocityY / divisor);
-        const newBrightness = Math.max(
-          0,
-          Math.min(1, brightness.value + change),
-        );
         brightness.value = newBrightness;
         runOnJS(handleBrightnessChange)(newBrightness);
       }
+
+      if (
+        (event.velocityY < 0 && lastVelocityY >= 0) ||
+        (event.velocityY >= 0 && lastVelocityY < 0)
+      ) {
+        runOnJS(setLastVelocityY)(event.velocityY);
+      }
+
+      if (event.x > screenHalfWidth) {
+        runOnJS(handleVolumeChange)(newVolume);
+        runOnJS(setShowVolumeOverlay)(true);
+      } else {
+        runOnJS(handleBrightnessChange)(newBrightness);
+        runOnJS(setShowBrightnessOverlay)(true);
+      }
     })
     .onEnd(() => {
+      runOnJS(setLastVelocityY)(0);
       runOnJS(setShowVolumeOverlay)(false);
       runOnJS(setShowBrightnessOverlay)(false);
     });
diff --git a/apps/expo/src/hooks/player/useBrightness.ts b/apps/expo/src/hooks/player/useBrightness.ts
index 844c4b2..4e6bfe5 100644
--- a/apps/expo/src/hooks/player/useBrightness.ts
+++ b/apps/expo/src/hooks/player/useBrightness.ts
@@ -24,17 +24,20 @@ export const useBrightness = () => {
     }
 
     void init();
-  }, []);
+  }, [brightness]);
 
-  const handleBrightnessChange = useCallback(async (newValue: number) => {
-    try {
-      setShowBrightnessOverlay(true);
-      brightness.value = newValue;
-      await Brightness.setBrightnessAsync(newValue);
-    } catch (error) {
-      console.error("Failed to set brightness:", error);
-    }
-  }, []);
+  const handleBrightnessChange = useCallback(
+    async (newValue: number) => {
+      try {
+        setShowBrightnessOverlay(true);
+        brightness.value = newValue;
+        await Brightness.setBrightnessAsync(newValue);
+      } catch (error) {
+        console.error("Failed to set brightness:", error);
+      }
+    },
+    [brightness],
+  );
 
   return {
     showBrightnessOverlay: debouncedShowBrightnessOverlay,
diff --git a/apps/expo/src/hooks/player/useVolume.ts b/apps/expo/src/hooks/player/useVolume.ts
index 42e5661..4722bf5 100644
--- a/apps/expo/src/hooks/player/useVolume.ts
+++ b/apps/expo/src/hooks/player/useVolume.ts
@@ -9,10 +9,13 @@ export const useVolume = () => {
   const volume = useSharedValue(1);
   const debouncedVolume = useDebounce(volume.value, 20);
 
-  const handleVolumeChange = useCallback((newValue: number) => {
-    volume.value = newValue;
-    setShowVolumeOverlay(true);
-  }, []);
+  const handleVolumeChange = useCallback(
+    (newValue: number) => {
+      volume.value = newValue;
+      setShowVolumeOverlay(true);
+    },
+    [volume],
+  );
 
   return {
     showVolumeOverlay: debouncedShowVolumeOverlay,