optimize volume and brightness overlays

apps/expo/app.config.ts

@@ -53,6 +53,7 @@ const defineConfig = (): ExpoConfig => ({
       "expo-build-properties",
       {
         android: {
+          minSdkVersion: 24,
           packagingOptions: {
             pickFirst: [
               "lib/x86/libcrypto.so",

apps/expo/src/components/player/VideoPlayer.tsx

@@ -27,31 +27,25 @@ import { isPointInSliderVicinity } from "./VideoSlider";
 export const VideoPlayer = () => {
   const {
     brightness,
-    debouncedBrightness,
     showBrightnessOverlay,
+    currentBrightness,
     setShowBrightnessOverlay,
     handleBrightnessChange,
   } = useBrightness();
-  const {
-    currentVolume,
-    debouncedVolume,
-    showVolumeOverlay,
-    setShowVolumeOverlay,
-    handleVolumeChange,
-  } = useVolume();
+  const { showVolumeOverlay, setShowVolumeOverlay, volume, currentVolume } =
+    useVolume();
   const { currentSpeed } = usePlaybackSpeed();
   const { synchronizePlayback } = useAudioTrack();
   const { dismissFullscreenPlayer } = usePlayer();
   const [videoSrc, setVideoSrc] = useState<AVPlaybackSource>();
   const [isLoading, setIsLoading] = useState(true);
   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);
 
+  const state = usePlayerStore((state) => state.interface.state);
   const isIdle = usePlayerStore((state) => state.interface.isIdle);
   const stream = usePlayerStore((state) => state.interface.currentStream);
   const selectedAudioTrack = useAudioTrackStore((state) => state.selectedTrack);
@@ -60,8 +54,8 @@ export const VideoPlayer = () => {
   const setVideoRef = usePlayerStore((state) => state.setVideoRef);
   const setStatus = usePlayerStore((state) => state.setStatus);
   const setIsIdle = usePlayerStore((state) => state.setIsIdle);
-  const playAudio = usePlayerStore((state) => state.playAudio);
-  const pauseAudio = usePlayerStore((state) => state.pauseAudio);
+  const toggleAudio = usePlayerStore((state) => state.toggleAudio);
+  const toggleState = usePlayerStore((state) => state.toggleState);
 
   const [gestureControlsEnabled, setGestureControlsEnabled] = useState(true);
 
@@ -89,20 +83,12 @@ export const VideoPlayer = () => {
     }
   });
 
-  const togglePlayback = () => {
-    setShouldPlay(!shouldPlay);
-    if (shouldPlay) {
-      void playAudio();
-    } else {
-      void pauseAudio();
-    }
-  };
-
   const doubleTapGesture = Gesture.Tap()
     .enabled(gestureControlsEnabled)
     .numberOfTaps(2)
     .onEnd(() => {
-      runOnJS(togglePlayback)();
+      runOnJS(toggleAudio)();
+      runOnJS(toggleState)();
     });
 
   const screenHalfWidth = Dimensions.get("window").width / 2;
@@ -114,6 +100,11 @@ export const VideoPlayer = () => {
       if (isGestureInSliderVicinity.value) {
         return;
       }
+      if (event.x > screenHalfWidth) {
+        runOnJS(setShowVolumeOverlay)(true);
+      } else {
+        runOnJS(setShowBrightnessOverlay)(true);
+      }
     })
     .onUpdate((event) => {
       const divisor = 5000;
@@ -123,35 +114,25 @@ 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) {
-        runOnJS(handleVolumeChange)(newVolume);
+        const newVolume = Math.max(0, Math.min(1, volume.value + change));
+        volume.value = newVolume;
       } else {
+        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);
+    .onEnd((event) => {
+      if (event.x > screenHalfWidth) {
+        runOnJS(setShowVolumeOverlay)(false);
+      } else {
+        runOnJS(setShowBrightnessOverlay)(false);
+      }
     });
 
   const composedGesture = Gesture.Race(
@@ -254,9 +235,9 @@ export const VideoPlayer = () => {
         <Video
           ref={setVideoRef}
           source={videoSrc}
-          shouldPlay={shouldPlay}
+          shouldPlay={state === "playing"}
           resizeMode={resizeMode}
-          volume={currentVolume.value}
+          volume={volume.value}
           rate={currentSpeed}
           onLoadStart={onVideoLoadStart}
           onReadyForDisplay={onReadyForDisplay}
@@ -285,41 +266,51 @@ export const VideoPlayer = () => {
             <Spinner
               size="large"
               color="$loadingIndicator"
-              style={{
-                position: "absolute",
-              }}
+              position="absolute"
             />
           )}
           <ControlsOverlay isLoading={isLoading} />
         </View>
-        {showVolumeOverlay && (
-          <View
-            position="absolute"
-            bottom={48}
-            alignSelf="center"
-            borderRadius={999}
-            backgroundColor="black"
-            padding={12}
-            opacity={0.5}
-          >
-            <Text fontWeight="bold">Volume: {debouncedVolume}</Text>
-          </View>
-        )}
+        {showVolumeOverlay && <VolumeOverlay volume={currentVolume} />}
         {showBrightnessOverlay && (
-          <View
-            position="absolute"
-            bottom={48}
-            alignSelf="center"
-            borderRadius={999}
-            backgroundColor="black"
-            padding={12}
-            opacity={0.5}
-          >
-            <Text fontWeight="bold">Brightness: {debouncedBrightness}</Text>
-          </View>
+          <BrightnessOverlay brightness={currentBrightness} />
         )}
         <CaptionRenderer />
       </View>
     </GestureDetector>
   );
 };
+
+function BrightnessOverlay(props: { brightness: number }) {
+  return (
+    <View
+      position="absolute"
+      bottom={48}
+      alignSelf="center"
+      borderRadius={999}
+      backgroundColor="black"
+      padding={12}
+      opacity={0.5}
+    >
+      <Text fontWeight="bold">
+        Brightness: {Math.round(props.brightness * 100)}%
+      </Text>
+    </View>
+  );
+}
+
+function VolumeOverlay(props: { volume: number }) {
+  return (
+    <View
+      position="absolute"
+      bottom={48}
+      alignSelf="center"
+      borderRadius={999}
+      backgroundColor="black"
+      padding={12}
+      opacity={0.5}
+    >
+      <Text fontWeight="bold">Volume: {Math.round(props.volume * 100)}%</Text>
+    </View>
+  );
+}

apps/expo/src/components/player/settings/Sheet.tsx

@@ -19,7 +19,7 @@ const PlayerText = styled(Text, {
 function SettingsSheet(props: SheetProps) {
   return (
     <Sheet
-      snapPoints={[80]}
+      snapPoints={[90]}
       dismissOnSnapToBottom
       modal
       animation="spring"

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;
 };

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

@@ -1,27 +1,19 @@
-import { useCallback, useState } from "react";
+import { useMemo, useState } from "react";
 import { useSharedValue } from "react-native-reanimated";
-
-import { useDebounce } from "../useDebounce";
+import { useDebounceValue } from "tamagui";
 
 export const useVolume = () => {
   const [showVolumeOverlay, setShowVolumeOverlay] = useState(false);
-  const debouncedShowVolumeOverlay = useDebounce(showVolumeOverlay, 20);
-  const volume = useSharedValue(1);
-  const debouncedVolume = useDebounce(volume.value, 20);
 
-  const handleVolumeChange = useCallback(
-    (newValue: number) => {
-      volume.value = newValue;
-      setShowVolumeOverlay(true);
-    },
-    [volume],
-  );
+  const volume = useSharedValue(1);
+
+  const currentVolume = useDebounceValue(volume.value, 20);
+  const memoizedVolume = useMemo(() => currentVolume, [currentVolume]);
 
   return {
-    showVolumeOverlay: debouncedShowVolumeOverlay,
-    currentVolume: volume,
-    debouncedVolume: `${Math.round(debouncedVolume * 100)}%`,
+    showVolumeOverlay,
     setShowVolumeOverlay,
-    handleVolumeChange,
+    volume,
+    currentVolume: memoizedVolume,
   } as const;
 };

apps/expo/src/stores/player/slices/audio.ts

@@ -11,6 +11,7 @@ export interface AudioSlice {
   setCurrentAudioTrack(track: AudioTrack | null): void;
   playAudio(): Promise<void>;
   pauseAudio(): Promise<void>;
+  toggleAudio(): Promise<void>;
   setAudioPositionAsync(positionMillis: number): Promise<void>;
 }
 
@@ -36,6 +37,18 @@ export const createAudioSlice: MakeSlice<AudioSlice> = (set, get) => ({
       await audioObject.pauseAsync();
     }
   },
+  toggleAudio: async () => {
+    const { audioObject } = get();
+    if (audioObject) {
+      const status = await audioObject.getStatusAsync();
+      if (!status.isLoaded) return;
+      if (status.isPlaying) {
+        await audioObject.pauseAsync();
+      } else {
+        await audioObject.playAsync();
+      }
+    }
+  },
   setAudioPositionAsync: async (positionMillis) => {
     const { audioObject } = get();
     if (audioObject) {

apps/expo/src/stores/player/slices/interface.ts

@@ -10,8 +10,11 @@ export enum PlayerStatus {
   READY,
 }
 
+type PlayerState = "playing" | "paused";
+
 export interface InterfaceSlice {
   interface: {
+    state: PlayerState;
     isIdle: boolean;
     idleTimeout: NodeJS.Timeout | null;
     currentStream: Stream | null;
@@ -24,6 +27,7 @@ export interface InterfaceSlice {
     audioTracks: AudioTrack[] | null;
     playerStatus: PlayerStatus;
   };
+  toggleState(): void;
   setIsIdle(state: boolean): void;
   setCurrentStream(stream: Stream): void;
   setAvailableStreams(streams: Stream[]): void;
@@ -38,6 +42,7 @@ export interface InterfaceSlice {
 
 export const createInterfaceSlice: MakeSlice<InterfaceSlice> = (set, get) => ({
   interface: {
+    state: "playing",
     isIdle: true,
     idleTimeout: null,
     currentStream: null,
@@ -50,6 +55,12 @@ export const createInterfaceSlice: MakeSlice<InterfaceSlice> = (set, get) => ({
     audioTracks: null,
     playerStatus: PlayerStatus.SCRAPING,
   },
+  toggleState: () => {
+    set((s) => {
+      s.interface.state =
+        s.interface.state === "playing" ? "paused" : "playing";
+    });
+  },
   setIsIdle: (state) => {
     set((s) => {
       if (s.interface.idleTimeout) clearTimeout(s.interface.idleTimeout);
@@ -108,6 +119,7 @@ export const createInterfaceSlice: MakeSlice<InterfaceSlice> = (set, get) => ({
   reset: () => {
     set(() => ({
       interface: {
+        state: "playing",
         isIdle: true,
         idleTimeout: null,
         currentStream: null,