optimize volume and brightness overlays

apps/expo/src/hooks/player/useBrightness.ts

@@ -1,14 +1,18 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useSharedValue } from "react-native-reanimated";
 import * as Brightness from "expo-brightness";
-
-import { useDebounce } from "../useDebounce";
+import { useDebounceValue } from "tamagui";
 
 export const useBrightness = () => {
   const [showBrightnessOverlay, setShowBrightnessOverlay] = useState(false);
-  const debouncedShowBrightnessOverlay = useDebounce(showBrightnessOverlay, 20);
+
   const brightness = useSharedValue(0.5);
-  const debouncedBrightness = useDebounce(brightness.value, 20);
+
+  const currentBrightness = useDebounceValue(brightness.value, 20);
+  const memoizedBrightness = useMemo(
+    () => currentBrightness,
+    [currentBrightness],
+  );
 
   useEffect(() => {
     async function init() {
@@ -26,24 +30,19 @@ 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);
-      }
-    },
-    [brightness],
-  );
+  const handleBrightnessChange = useCallback(async (newValue: number) => {
+    try {
+      await Brightness.setBrightnessAsync(newValue);
+    } catch (error) {
+      console.error("Failed to set brightness:", error);
+    }
+  }, []);
 
   return {
-    showBrightnessOverlay: debouncedShowBrightnessOverlay,
-    brightness,
-    debouncedBrightness: `${Math.round(debouncedBrightness * 100)}%`,
+    showBrightnessOverlay,
     setShowBrightnessOverlay,
+    brightness,
+    currentBrightness: memoizedBrightness,
     handleBrightnessChange,
   } as const;
 };