volume cleanup

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

@@ -18,12 +18,12 @@ export const ControlsOverlay = ({ headerData }: ControlsOverlayProps) => {
     setIsIdle(!idle);
   };
   return (
-    <TouchableWithoutFeedback onPress={handleTouch}>
-      <View className="absolute left-0 top-0 flex h-full w-full flex-1">
-        <Header data={headerData} />
+    <View className="absolute left-0 top-0 flex h-full w-full flex-1">
+      <Header data={headerData} />
+      <TouchableWithoutFeedback onPress={handleTouch}>
         <MiddleControls />
-        <BottomControls />
-      </View>
-    </TouchableWithoutFeedback>
+      </TouchableWithoutFeedback>
+      <BottomControls />
+    </View>
   );
 };

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

@@ -1,4 +1,4 @@
-import { View } from "react-native";
+import { StyleSheet, View } from "react-native";
 
 import { Controls } from "./Controls";
 import { PlayButton } from "./PlayButton";
@@ -6,8 +6,8 @@ import { SeekButton } from "./SeekButton";
 
 export const MiddleControls = () => {
   return (
-    <View className="flex flex-1 flex-row items-center justify-center gap-24">
-      <Controls>
+    <View style={styles.container}>
+      <Controls className="mr-24">
         <SeekButton type="backward" />
       </Controls>
       <Controls>
@@ -19,3 +19,13 @@ export const MiddleControls = () => {
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 82,
+  },
+});

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

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { View } from "react-native";
+import { TouchableOpacity } from "react-native";
 
 import { usePlayerStore } from "~/stores/player/store";
 import VideoSlider from "./VideoSlider";
@@ -7,6 +7,7 @@ import VideoSlider from "./VideoSlider";
 export const ProgressBar = () => {
   const status = usePlayerStore((state) => state.status);
   const videoRef = usePlayerStore((state) => state.videoRef);
+  const setIsIdle = usePlayerStore((state) => state.setIsIdle);
 
   const updateProgress = useCallback(
     (newProgress: number) => {
@@ -19,9 +20,12 @@ export const ProgressBar = () => {
 
   if (status?.isLoaded) {
     return (
-      <View className="flex h-10 flex-1 items-center justify-center p-8">
+      <TouchableOpacity
+        className="flex h-10 flex-1 items-center justify-center p-8"
+        onPress={() => setIsIdle(false)}
+      >
         <VideoSlider onSlidingComplete={updateProgress} />
-      </View>
+      </TouchableOpacity>
     );
   }
 };

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

@@ -31,6 +31,8 @@ interface VideoSliderProps {
 }
 
 const VideoSlider = ({ onSlidingComplete }: VideoSliderProps) => {
+  const tapRef = useRef<TapGestureHandler>(null);
+  const panRef = useRef<PanGestureHandler>(null);
   const status = usePlayerStore((state) => state.status);
 
   const width = Dimensions.get("screen").width - 200;
@@ -52,9 +54,6 @@ const VideoSlider = ({ onSlidingComplete }: VideoSliderProps) => {
   const valueX = valueToX(value);
   const translateX = useSharedValue(valueToX(value));
 
-  const tapRef = useRef<TapGestureHandler>(null);
-  const panRef = useRef<PanGestureHandler>(null);
-
   useEffect(() => {
     translateX.value = clamp(valueX, 0, width - knobSize_);
   }, [valueX]);