fix: control touch events on iOS

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

@@ -1,7 +1,6 @@
 import type { TouchableOpacity } from "react-native";
 import React from "react";
 import { View } from "react-native";
-import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 
 import { usePlayerStore } from "~/stores/player/store";
 
@@ -9,16 +8,8 @@ interface ControlsProps extends React.ComponentProps<typeof TouchableOpacity> {
   children: React.ReactNode;
 }
 
-export const Controls = ({ children, className }: ControlsProps) => {
+export const Controls = ({ children }: ControlsProps) => {
   const idle = usePlayerStore((state) => state.interface.isIdle);
-  const setIsIdle = usePlayerStore((state) => state.setIsIdle);
 
-  return (
+  return <View>{!idle && children}</View>;
-    <TouchableWithoutFeedback
-      className={className}
-      onPress={() => setIsIdle(false)}
-    >
-      <View>{!idle && children}</View>
-    </TouchableWithoutFeedback>
-  );
 };

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

@@ -1,6 +1,7 @@
-import { View } from "react-native";
+import { TouchableWithoutFeedback, View } from "react-native";
 
 import type { HeaderData } from "./Header";
+import { usePlayerStore } from "~/stores/player/store";
 import { BottomControls } from "./BottomControls";
 import { Header } from "./Header";
 import { MiddleControls } from "./MiddleControls";
@@ -10,11 +11,19 @@ interface ControlsOverlayProps {
 }
 
 export const ControlsOverlay = ({ headerData }: ControlsOverlayProps) => {
+  const idle = usePlayerStore((state) => state.interface.isIdle);
+  const setIsIdle = usePlayerStore((state) => state.setIsIdle);
+
+  const handleTouch = () => {
+    setIsIdle(!idle);
+  };
   return (
-    <View className="absolute left-0 top-0 flex h-full w-full flex-1">
+    <TouchableWithoutFeedback onPress={handleTouch}>
-      <Header data={headerData} />
+      <View className="absolute left-0 top-0 flex h-full w-full flex-1">
-      <MiddleControls />
+        <Header data={headerData} />
-      <BottomControls />
+        <MiddleControls />
-    </View>
+        <BottomControls />
+      </View>
+    </TouchableWithoutFeedback>
   );
 };